AutoForm 7.0.0 [released]

announce
21

Awesome can’t wait to try

1 Like
22

That’s great Jan! This is a vital package to all of us Blaze users so a big thanks to you and @pouyae for all your work on this :clap:

2 Likes
23

Okay it’s done :tada: I feel wasted but happy :star_struck:

Many thanks to all of you who have followed this topic and especially to @marklynch who helped out with testing :+1:

Please consider the following migration note

After I updated the themes I realized a flaw in the way I designed the support for dynamic-import. It only worked in my development environment. Once I published the packages I could not dynamically import the themes anymore.

I realized, that this would also be the case for the AutoForm package, so I had to make last-minute changes and test them with all the themes and combinations (static/dynamic, theme/autoform) and finally resolved it to support both static and dynamic at the same time.

It also requires no environment variables anymore but depends on the entry file you import from the package.

It’s all wrapped up in the installation guide for the AutoForm and the themes guides.

It should not take much to update (the migration section might also help) and if there is anything uncovered by the docs please let me know asap :slight_smile:

Migration example Bootstrap 3

For those who still use a bootstrap 3 based theme this is not much of work (I assume you have BS3 already installed etc.). You need to add the following packages:

  • aldeed:autoform@7.0.0!
  • communitypackages:autoform-bootstrap3

In your top-level client code you need to add these three lines:

import 'meteor/aldeed:autoform/static
import { AutoFormThemeBootstrap3 } from 'meteor/communitypackages:autoform-bootstrap3/static''

AutoForm.load()
AutoFormThemeBootstrap3.load()
AutoForm.setDefaultTemplate('bootstrap3')

That’s it. The rest should work as before. Note, that the Bootstrap version of twbs:bootstrap is considered vulnerable and you should use 3.4.1 via NPM, which is also supported here.

Dynamic imports example

If you want to reduce initial bundle size by about 100kb you can also import. Additionally to the above packages you need to add

  • dynamic-import

and import the packages via the following code:

import { AutoFormThemeBootstrap3 } from 'meteor/communitypackages:autoform-bootstrap3/dynamic'
import 'meteor/aldeed:autoform/dynamic'

const load = async () => {
  await AutoForm.load()
  await AutoFormThemeBootstrap3.load()
  AutoForm.setDefaultTemplate('bootstrap3')
})

load()

You can easily bind this to a reactive variable in order to prevent Templates from rendering until the form and them are loaded:

import { AutoFormThemeBootstrap3 } from 'meteor/communitypackages:autoform-bootstrap3/dynamic'
import 'meteor/aldeed:autoform/dynamic'

export const autoFormLoaded = new ReactiveVar(false)

Meteor.startup(async () => {
  await AutoForm.load()
  await AutoFormThemeBootstrap3.load()
  AutoForm.setDefaultTemplate('bootstrap3')
  autoFormLoaded.set(true)
})

Why add these /static and /dynamic to the import path?

In order to truly support static as well as dynamic imports (without interfering each other) there needs to be a different entry point.

By making these entry points explicit we can avoid confusion and prevent leaking any behavior from one into another. This is a bit like tree-shaking light.

Bootstrap 4 examples

The installation and import guides in the README use Bootstrap 4. If you intend to migrate to BS4 you can simply follow the guide there.

4 Likes
24

I started to use with static with bootstrap4, didn’t face with an issue.
I think I should migrate to dynamic in near future.

Thanks to your efforts

1 Like