Import from Node.js

[Siilwyn]

👋 trying to import hyperapp in Node.js doesn't seem to work?

To reproduce first run mkdir hyperapp-import; cd hyperapp-import; npm i hyperapp.

Then either require with CommonJS: node -e 'require("hyperapp")', which results in:

export var Lazy = function(props) {
^^^^^^

SyntaxError: Unexpected token 'export'
    at Object.compileFunction (vm.js:344:18)
    at wrapSafe (internal/modules/cjs/loader.js:1106:15)
    at Module._compile (internal/modules/cjs/loader.js:1140:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1196:10)
    at Module.load (internal/modules/cjs/loader.js:1040:32)
    at Function.Module._load (internal/modules/cjs/loader.js:929:14)
    at Module.require (internal/modules/cjs/loader.js:1080:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at [eval]:1:1
    at Script.runInThisContext (vm.js:131:20)

Or import using ESM by saving import hyperapp from 'hyperapp'; in a test.mjs file followed by node test.mjs, logging:

export var Lazy = function(props) {
^^^^^^

SyntaxError: Unexpected token 'export'
    at Object.compileFunction (vm.js:344:18)
    at wrapSafe (internal/modules/cjs/loader.js:1106:15)
    at Module._compile (internal/modules/cjs/loader.js:1140:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1196:10)
    at Module.load (internal/modules/cjs/loader.js:1040:32)
    at Function.Module._load (internal/modules/cjs/loader.js:929:14)
    at ModuleWrap.<anonymous> (internal/modules/esm/translators.js:114:15)
    at ModuleJob.run (internal/modules/esm/module_job.js:110:37)
    at async Loader.import (internal/modules/esm/loader.js:179:24)

[jorgebucaran]

@Siilwyn 👍 I'll add type: module to package.json soon and you'll be able to import it in Node 14.

Out of curiosity, what were you trying to do?

See also #951.

[Siilwyn]

Alright that would be great! I'm trying to server-side render hyperapp.

Btw. if it helps any with ideas of setting this up I have a package that I publish in both commonjs and esm form too using rollup, relevant:

  "type": "module",
  "main": "./src/main.cjs",
  "exports": {
    "require": "./src/main.cjs",
    "default": "./src/main.mjs"
  },
  "files": [
    "src/main.cjs",
    "src/main.mjs"
  ],
  "scripts": {
    "build": "rollup src/main.mjs --format cjs --file src/main.cjs",

[frenzzy]

@Siilwyn you don't need to import Hyperapp on server-side. You can use hyperapp-render to stringify your hyperapp views on server-side.

An example of how this can be implemented you can find in hyperapp-starter.

[jorgebucaran]

@Siilwyn What's your strategy for server-side rendering Hyperapp?

[Siilwyn]

What @frenzzy just mentioned, using hyperapp-render. But @jorgebucaran do you know any other options? I'm curious.

Also yes I do need to import Hyperapp on server-side because I need access to h to build the 'DOM'.

[jorgebucaran]

@Siilwyn Nothing other than duplicating the view code as HTML and serving it. But I'm definitely curious too. 👍

[Siilwyn]

Slightly off-topic:
Do you think you would ever include the functionality of hyperapp-render in the hyperapp package? Since with ESM it's easy to tree-shake it would bring a good full experience to developers. I know some other solutions that do this, worthy mention would be choo though your project's philosophy and strive for minimalism might not match doing that.

[talentlessguy]

ES syntax works fine with Node.js with 14.13.1 and 15.0.1

this works:

// app.mjs or "type": "module" in package.json
import { h } from 'hyperapp'

[jameswilddev]

I'm currently trying to write unit tests for my Hyperapp views, but requiring Hyperapp from the Node-based Jasmine CLI causes it to fail as Jasmine won't load any file not ending .mjs as a module.

Currently experimenting with creating a mirror package which has its JS files transpiled.

[jameswilddev]

I've not really tested it yet but here's my bodge:

https://www.npmjs.com/package/hyperapp-cjs

[jorgebucaran]

We can import Hyperapp as an ES module in Node like in this test. 🙆‍♂️