developit / microbundle

📦 Zero-configuration bundler for tiny modules.
https://npm.im/microbundle
MIT License
8.06k stars 362 forks source link

SolidJS compiled code not getting generated correctly #879

Closed burhanuday closed 3 years ago

burhanuday commented 3 years ago

I am trying to create a library to be consumed in a SolidJS project

Currently i only have one component in my project

src/index.tsx

import { createSignal, onCleanup, Component } from "solid-js";

const Counter: Component = () => {
  const [count, setCount] = createSignal(0),
    timer = setInterval(() => setCount((c) => c + 1), 1000);
  onCleanup(() => clearInterval(timer));

  return <div>{count()}</div>;
};

export { Counter };

After running yarn build. in my dist folder, it gets compiled down to index.modern.js

const Counter = () => {
  const [count, setCount] = createSignal(0),
        timer = setInterval(() => setCount(c => c + 1), 1000);
  onCleanup(() => clearInterval(timer));
  return h("div", null, count());
};

Here, h is not defined. I am unable to set the project up correctly. please help

Here's a snapshot of my package file

{
  "name": "solidjs-test",
  "version": "1.0.0",
  "license": "MIT",
  "typings": "./dist/index.d.ts",
  "types": "./dist/index.d.ts",
  "keywords": [
    "solid-js",
    "test"
  ],
  "main": "dist/index.js",
  "module": "dist/index.modern.js",
  "source": "src/index.tsx",
  "engines": {
    "node": ">=10"
  },
  "scripts": {
    "build": "microbundle --no-compress --format modern,cjs --tsconfig tsconfig.json",
    "start": "microbundle watch --no-compress --format modern,cjs --tsconfig tsconfig.json"
  },
  "devDependencies": {
    "babel-preset-solid": "^1.1.0",
    "microbundle": "^0.13.3",
    "solid-js": "^1.1.0",
    "typescript": "^4.3.5"
  },
  "babel": {
    "presets": [
      "solid"
    ]
  }
}

Here's my tsconfig

{
  "include": ["src"],
  "compilerOptions": {
    "module": "commonjs",
    "jsx": "preserve",
    "jsxImportSource": "solid-js",
    "esModuleInterop": true,
    "sourceMap": true,
    "allowJs": true,
    "lib": ["es6", "dom"],
    "rootDir": "src",
    "moduleResolution": "node",
  },
  "exclude": ["dist", "node_modules", "example"]
}
rschristian commented 3 years ago

h is the default JSX pragma (see all-cli-options).

From what I can tell, SolidJS does not use a JSX pragma but its own Babel transform, so it doesn't seem to be compatible with Microbundle here.