What are the limitations of webc:type="js"

[solution-loisir]

From the documentation I was expecting to be able to run any arbitrary server side (Node scripts) JavaScript inside webc:type="js".

Run any arbitrary server JavaScript in WebC. Source

Yet, I'm getting errors when trying to use JS built-in methods and constructors. For example, the following code.

comp-onent.webc

<script webc:type="js" webc:is="template">
  new Date().toString();
</script>

Will yield this error:

[11ty] 1. Having trouble rendering webc template ./src/pages/home.webc (via TemplateContentRenderError)

[11ty] 2. Date is not a constructor (via TypeError)
[11ty] 
[11ty] Original error stack trace: evalmachine.<anonymous>:2
[11ty]   new Date().toString();
[11ty]   ^
[11ty] 
[11ty] TypeError: Date is not a constructor
[11ty]     at evalmachine.<anonymous>:2:3
[11ty]     at Script.runInContext (node:vm:139:12)
[11ty]     at Script.runInNewContext (node:vm:144:17)
[11ty]     at Object.runInNewContext (node:vm:298:38)
[11ty]     at Function.evaluateScript (/home/mathieu/webc-starter-kit/node_modules/@11ty/webc/src/moduleScript.cjs:62:25)
[11ty]     at Object.<anonymous> (file:///home/mathieu/webc-starter-kit/node_modules/@11ty/webc/src/ast.js:130:24)
[11ty]     at AstSerializer.transformContent (file:///home/mathieu/webc-starter-kit/node_modules/@11ty/webc/src/ast.js:802:42)
[11ty]     at AstSerializer.compileNode (file:///home/mathieu/webc-starter-kit/node_modules/@11ty/webc/src/ast.js:1216:20)
[11ty]     at AstSerializer.getChildContent (file:///home/mathieu/webc-starter-kit/node_modules/@11ty/webc/src/ast.js:646:40)
[11ty]     at AstSerializer.compileNode (file:///home/mathieu/webc-starter-kit/node_modules/@11ty/webc/src/ast.js:1353:46)

Also, trying to use parseInt like so:

comp-onent.webc

<script webc:type="js" webc:is="template">
  const num = parseInt("1");
  `${2 + num}`;
</script>

Will throw:

[11ty] 1. Having trouble rendering webc template ./src/pages/home.webc (via TemplateContentRenderError)

[11ty] 2. parseInt is not a function (via TypeError)
[11ty] 
[11ty] Original error stack trace: evalmachine.<anonymous>:2
[11ty]   const num = parseInt("1");
[11ty]               ^
[11ty] 
[11ty] TypeError: parseInt is not a function
[11ty]     at evalmachine.<anonymous>:2:15
[11ty]     at Script.runInContext (node:vm:139:12)
[11ty]     at Script.runInNewContext (node:vm:144:17)
[11ty]     at Object.runInNewContext (node:vm:298:38)
[11ty]     at Function.evaluateScript (/home/mathieu/webc-starter-kit/node_modules/@11ty/webc/src/moduleScript.cjs:62:25)
[11ty]     at Object.<anonymous> (file:///home/mathieu/webc-starter-kit/node_modules/@11ty/webc/src/ast.js:130:24)
[11ty]     at AstSerializer.transformContent (file:///home/mathieu/webc-starter-kit/node_modules/@11ty/webc/src/ast.js:802:42)
[11ty]     at AstSerializer.compileNode (file:///home/mathieu/webc-starter-kit/node_modules/@11ty/webc/src/ast.js:1216:20)
[11ty]     at AstSerializer.getChildContent (file:///home/mathieu/webc-starter-kit/node_modules/@11ty/webc/src/ast.js:646:40)
[11ty]     at AstSerializer.compileNode (file:///home/mathieu/webc-starter-kit/node_modules/@11ty/webc/src/ast.js:1353:46)

I'm using Eleventy v2.0.0 with webc v0.8.1. I will investigate more and report here.

[solution-loisir]

It's possible to work around it by using an helper function. So for example:

eleventy config file

config.addFilter("number", function(value) {
  return parseInt(value, 10);
});

myComponent.webc

<div @html="number('3') - 2"></div>

<!-- Outputs <div>1</div> -->

[solution-loisir]

I think I'm duplicating #100

[zachleat]

Yeah! And #99 both fixed in the upcoming WebC v0.9.0