velocity.js icon indicating copy to clipboard operation
velocity.js copied to clipboard

ESM module build?

Open bseib opened this issue 3 years ago • 10 comments

Have you considered building the lib so that it is ESM compatible? I.e. for modern tooling that uses import statements rather than require(), and can do tree-shaking optimizations, etc. Here's an example library project setup using esbuild.

bseib avatar May 07 '22 20:05 bseib

Here is my fork as an example of how to get it to build an ESM compatible build.

https://github.com/Gentomi/velocity.js

The changes needed: https://github.com/shepherdwind/velocity.js/compare/master...Gentomi:velocity.js:master

bseib avatar Feb 02 '23 20:02 bseib

I've recently been rewriting my code using typescript. I'll post an ESM package when I'm done. Thanks for you code example.

shepherdwind avatar Feb 04 '23 01:02 shepherdwind

@bseib now I published new beta version 2.1.0-beta, Can you help me to check if this version is work ok with esm module?

shepherdwind avatar Feb 14 '23 15:02 shepherdwind

@bseib now I published new beta version 2.1.0-beta, Can you help me to check if this version is work ok with esm module?

Hey awesome @shepherdwind. I should have a chance to look at it this weekend.

bseib avatar Feb 14 '23 15:02 bseib

Hey @shepherdwind , do you have any plans to release your BETA branch to npm? That would make testing a lot simpler -- I would just update my package.json to point at your new BETA version.

bseib avatar Feb 20 '23 21:02 bseib

Hey @shepherdwind , do you have any plans to release your BETA branch to npm? That would make testing a lot simpler -- I would just update my package.json to point at your new BETA version.

https://www.npmjs.com/package/velocityjs/v/2.1.0-beta this beta version is the new one, you can just try this. I had published it a week ago.

shepherdwind avatar Feb 21 '23 01:02 shepherdwind

https://www.npmjs.com/package/velocityjs/v/2.1.0-beta this beta version is the new one, you can just try this. I had published it a week ago.

Ah, thank you, I missed that somehow.

Things look pretty good. I have one snippet of code left to fix, and I haven't dug in yet to see what's going on. My function was parsing a velocity template, then looking through the abstract syntax tree to get all the parameter names that were found. I need to figure out the typescript equivalent for x.id that worked in javascript.

const parseOutParamNames: ((template: string) => string[]) = (template: string) => {
      const astArray = (vjs.parse(template)) as Array<VELOCITY_AST>
      return astArray.filter((x) => {
        return typeof x === 'object'
      }).map((x) => {
        return x.id
      })
    }

I ought to be able to make a new function that is cleaner with respect to types now that the underlying code is also in typescript.

bseib avatar Feb 21 '23 14:02 bseib

@shepherdwind I think VELOCITY_AST needs to be exported at the top level. That is the type returned when calling parse, and the caller will need that type to do anything useful. I tried to import it directly, i.e.,

import {VELOCITY_AST} from "velocityjs/dist/types/type"

However that lead to other compilation issues.

I ought to be able to simply do:

import {parse, render, VELOCITY_AST} from 'velocityjs'

bseib avatar Feb 25 '23 18:02 bseib

@shepherdwind The second issue I'm seeing is a runtime error:

image

The sources are not in the distribution, but it looks like this may be referring to here: https://github.com/shepherdwind/velocity.js/blob/dd6c4616253546ebc24ee6da684fa094a8babf8f/src/compile/blocks.ts#L10

Maybe there is no default constructor up the chain of classes? Not sure what's going on there...

bseib avatar Feb 25 '23 18:02 bseib

@shepherdwind The second issue I'm seeing is a runtime error:

image

The sources are not in the distribution, but it looks like this may be referring to here:

https://github.com/shepherdwind/velocity.js/blob/dd6c4616253546ebc24ee6da684fa094a8babf8f/src/compile/blocks.ts#L10

Maybe there is no default constructor up the chain of classes? Not sure what's going on there...

Can you provide me you code? I just try this in node.

It is better to have a project that can reproduce the whole scene.

shepherdwind avatar Feb 26 '23 07:02 shepherdwind