Transpile Validation

[theorise]

We are only using Validation from bunnyjs but the src/Validation file isn't precompiled into the dist file.

To get around this we exclude bunnyjs in our babel loader.

exclude: /node_modules(?!\/bunnyjs)/,

But it would be precompiled into the dist folder or exported from the main bunnyjs object.

[Mevrael]

Hi @theorise

Thank you for your feedback.

Could you please describe how exactly are you importing Validation in your codebase and what would you suggest? Do you use dist file from bunnyjs.com or ES6 import? Do you have any conflicts in your build process? Do you use rollup, webpack or something else? Are you trying to bundle everything into 1 file or you have more like a SPA?

There are changes in dev build process which will be excluded into separate npm package assets-builder. This will allow anyone to generate dists files easily.

Thanks for using bunnyjs, what is your experience with Validation so far and what would you like to change or add? Do you use bootstrap 3, 4 or anything else?

[chrisjbrown]

Similar issue,

Using webpack and es6, bundling everything into one file. Trying to import

import { Validation } from 'bunnyjs/src/Validation';

and I get the error invalid token 'import'

[Mevrael]

Hi @chrisjbrown

Thanks for feedback.

Could you please provide more details about your webpack config, what version do you use, same questions for babel. Do you have any npm packages which you could import successfully?

[chrisjbrown]

"babel-cli": "^6.16.0", "babel-core": "^6.17.0", "babel-loader": "^6.2.5", "webpack": "^1.13.2",

I'm successfully using many packages. One being momentjs.

import Moment from 'moment';

this looks up moment in node_modules/moment and checks against it's package.json for the property "main" which tells webpack where the import should pull from.

In the case of moment main is './moment.js' which is an already a transpiled file. Rather than pointing to 'src/moment.js' which is raw es6

[Mevrael]

@chrisjbrown @theorise

I've successfully transpiled Validation into single bundle using simple webpack.config.js

module.exports = {
    entry: './src/app.js',
    output: {
        path: __dirname,
        filename: 'public/build/app.js'
    },
    module: {
        loaders: [
            {
              loader: 'babel',
              query: {
                  presets: ['es2015']
              }
            }
        ]
    }
};

src/app.js

import { Validation } from 'bunnyjs/src/Validation';

Validation.init(document.forms[0]);

P.S. I've added a simple HTML API to init validation. You can just do import 'bunnyjs/src/Validation' and add new attribute to form <form validator="bunny">. It is not documented yet.

Make sure you are using babel-preset-es2015 or any else.

[chrisjbrown]

Could you add this as part of you're build process?

So that people can just use

'import { Validation } from 'bunnyjs/dist/Validation';'

Where this is a version of validation that has already been transpiled

[Mevrael]

BunnyJS is a ES6 library which is a well-supported current standard and not a ES5. We are almost in ES7 actually. Many projects are using ES6 and babel already.

Unfortunately every project has own build tools and process and I can not just generate different modules for everyone. It is up to developer to decide how he wants to build his project. In next 1-2 years BunnyJS could be used without any transpilation at all. It can be used even today for Chrome/FF and I believe latest Edge and iOS Safari too.

Currently dists folder contains old minified JS without any modules so you could just do an oldschool <script src="..."></script> or combine these files into one js file.

Dists are not designed to use from build process, i.e. import CommonJS, AMD or any other modules.

I am not using Webpack, but will you be able to 'import { Validation } from 'bunnyjs/dist/Validation'; if that file wouldn't contain any modules, exports and any other extra code generated by a webpack?

Also those dists files doesn't include any sub-dependencies, i.e. Validation is importing Bunny ajax, file and image. Those files have to be included separately or merged into one file.

[Mevrael]

In latest Beta release there are all dists available. You, might, wouldn't be able to use them as a modules, but you can include them in HTML with <script> or just concat multiple JS files into one.