How does one use crank without a bundler? #124

Perrishnikov · 2020-06-04T19:03:35Z

How does one use crank without a bundler? Following the installation instructions as-is, did not work. "Uncaught SyntaxError: Unexpected token '<'"

brainkim · 2020-06-05T09:01:50Z

Hello! I’m sorry to hear you’re having trouble. I think I need some more information about your situation. Which instructions are you referring to? Also, if you’re using JSX, you necessarily need a transpilation step of some kind. Do you have a minimal example that I can look at?

Perrishnikov · 2020-06-05T11:13:23Z

Thanks for following up. I was following the Getting Started Installation instructions. Below is the code.

//index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Crank.js Test</title>
  </head>

  <body>
    <div id="app"></div>
    <script type="module" src="index.js"></script>
  </body>
</html>

//index.js
/** @jsx createElement */
import { createElement } from "https://unpkg.com/@bikeshaving/crank@0.1.6/esm/index.js";
// import { createElement } from "/web_modules/@bikeshaving/crank.js";
// import { Renderer } from '/web_modules/@bikeshaving/crank.js';
import { Renderer } from 'https://unpkg.com/@bikeshaving/crank@0.1.6/esm/index.js';

function Greeting({ name = "World" }) {
  return (
    <div>Hello {name}</div>
  );
}

Renderer.render(<Greeting />, document.body);

brainkim · 2020-06-05T11:21:44Z

Hmmm, so as far as I can tell, the problem is that you’re using JSX in a vanilla JavaScript file. You need to either transpile it with something like babel, typescript or sucrase, or use an alternative syntax. You can, for instance, use createElement directly:

function Greeting({ name = "World" }) {
  return createElement("div", null, "Hello ", name);
}

Or you can use something like htm:

import { createElement } from "https://unpkg.com/@bikeshaving/crank@0.1.6/index.js";
import { Renderer } from 'https://unpkg.com/@bikeshaving/crank@0.1.6/dom.js';
import htm from 'https://unpkg.com/htm?module';
const html = htm.bind(createElement);
function Greeting({ name = "World" }) {
  return html`<div> Hello ${name}</div>`;
}

I like transpilation, but these options are available to you. Also check out the docs from this PR for more information.

Let me know if this makes sense!

Perrishnikov · 2020-06-09T12:53:16Z

Thanks for your explanation.

brainkim · 2020-07-02T09:40:09Z

Closing for housekeeping purposes. If you still need help feel free to reopen the issue!

brainkim closed this as completed Jul 2, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How does one use crank without a bundler? #124

How does one use crank without a bundler? #124

Perrishnikov commented Jun 4, 2020 •

edited

brainkim commented Jun 5, 2020

Perrishnikov commented Jun 5, 2020

brainkim commented Jun 5, 2020 •

edited

Perrishnikov commented Jun 9, 2020

brainkim commented Jul 2, 2020

How does one use crank without a bundler? #124

How does one use crank without a bundler? #124

Comments

Perrishnikov commented Jun 4, 2020 • edited

brainkim commented Jun 5, 2020

Perrishnikov commented Jun 5, 2020

brainkim commented Jun 5, 2020 • edited

Perrishnikov commented Jun 9, 2020

brainkim commented Jul 2, 2020

Perrishnikov commented Jun 4, 2020 •

edited

brainkim commented Jun 5, 2020 •

edited