index.tsx

import confetti from 'canvas-confetti';
import * as Crank from "@bikeshaving/crank";
import { renderer as dom } from "@bikeshaving/crank/dom";

confetti.create(document.getElementById('canvas'), {
  resize: true,
  useWorker: true,
})({ particleCount: 200, spread: 200 });


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

function* Counter(this: Crank.Context) {
  let count = 0;
  while (true) {
    count++;
    yield (
      <div>
        You have updated this component {count}{' '}
        {count === 1 ? ' time' : ' times'}
      </div>
    );
  }
}

function App() {
  return (
    <Crank.Fragment>
      <Greeting name="You" />
      <Counter />
    </Crank.Fragment>
  );
}

document.addEventListener("DOMContentLoaded", () => {
  dom.render(<App />, document.getElementById("app") as HTMLDivElement);
});

// @ts-ignore
if (import.meta.hot) {
  // @ts-ignore
  import.meta.hot.accept(() => {
    dom.render(<App />, document.getElementById("app") as HTMLDivElement);
  });
  /*
  // @ts-ignore
  import.meta.hot.dispose(() => {
  });*/
}

package.json

{
  "name": "@snowpack/app-template-blank",
  "version": "1.2.0",
  "license": "MIT",
  "keywords": [
    "csa-template"
  ],
  "publishConfig": {
    "access": "public"
  },
  "scripts": {
    "start": "snowpack dev",
    "build": "snowpack build",
    "format": "prettier --write \"src/**/*.js\"",
    "lint": "prettier --check \"src/**/*.js\"",
    "test": "echo \"This template does not include a test runner by default.\" && exit 1"
  },
  "dependencies": {
    "@bikeshaving/crank": "^0.1.6",
    "canvas-confetti": "^1.2.0",
    "typescript": "^3.9.5"
  },
  "devDependencies": {
    "prettier": "^2.0.0",
    "snowpack": "^2.5.0"
  },
  "gitHead": "795f4311d79a70cc9f19f21b512b7f8675d73f17"
}

snowpack.config.json

{
  "scripts": {
    "mount:public": "mount public --to /",
    "mount:src": "mount src --to /_dist_",
    "build:tsx": "esbuild --jsx-factory=Crank.createElement --jsx-fragment=Fragment --loader=tsx"
  },
  "plugins": [
  ]
}