choojs / bankai

:station: - friendly web compiler
Apache License 2.0
1.09k stars 102 forks source link

nanohtml transform is not applied to code transpiled from Typescript with esModuleInterop #536

Open hugueschabot opened 4 years ago

hugueschabot commented 4 years ago

Context

In order to use choo with Typescript, is is better to transpile the code first and then pass it to bankai as suggested in #285 .

And in order to be able to apply nanohtml transform, one need to transpile to es2015 at least (otherwise the template strings are transformed).

When I need to enable the Typescript esModuleInterop option, it breaks the nanohtml transform.

How to reproduce

Create index.ts

import Choo from 'choo'
import html from 'choo/html'

const app = new Choo()
app.route('/', function () {
  return html`<body>meow</body>`
})

module.exports = app.mount('body')

Create tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es2015",
    "esModuleInterop": true
  }
}

Transpile with tsc index.ts to get index.js

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const choo_1 = __importDefault(require("choo"));
const html_1 = __importDefault(require("choo/html"));
const app = new choo_1.default();
app.route('/', function () {
    return html_1.default `<body>meow</body>`;
});
module.exports = app.mount('body');

Expected Behavior

When processing index.js the HTML template strings are replace by DOM element creation.

Current Behavior

Currently, the HTML templates string are not replace and we get Uncaught TypeError: html_1.default is not a function in the Javascript console when starting bankai.

Possible Solution

Upgrade nanohtml to version 1.7.0