Buildless option

[lukexor]

SolidJS supports buildless templating: https://www.solidjs.com/guides/getting-started#buildless-options

which I was experimenting with using jsdelivr - however, while jsdelivr does have @suid/material hosted because there's an npm package - it doesn't seem usable in its current jsx packaged state. I've tried skypack and unpkg as well with the same issue.

Here's a comparison with @mui/material:

https://cdn.jsdelivr.net/npm/@mui/[email protected] - application/javascript; charset=utf-8 and for esm: https://cdn.jsdelivr.net/npm/@mui/[email protected]/+esm https://cdn.jsdelivr.net/npm/@suid/[email protected] - text/jsx; charset=utf-8

Attempting to use @suid/material results in:

The resource from “https://cdn.jsdelivr.net/npm/@suid/[email protected]” was blocked due to MIME type (“text/jsx”) mismatch (X-Content-Type-Options: nosniff).

I also experimented with trying to use @babel/standalone but didn't have any success.

I'd love to be able to deploy buildless widgets using Solid and SUID.

[lukexor]

also for reference: https://github.com/solidjs/solid/issues/1159

[lukexor]

I did find that esm.sh has a pre-compiled version of @suid/material as well but they're using the default esbuild settings and so it inserts React.createComponent transpiled code.

I was then able to get this working by building an esm version of @suid/material locally.

If this could be added to the npm release in such a way that esm.sh or jsdelivr can provide it correctly as an esm module, that would be great. Otherwise I'll just have to build and host it locally.

const { build } = require("esbuild");
const { solidPlugin } = require("esbuild-plugin-solid");

build({
  entryPoints: ["lib/index.jsx"],
  bundle: true,
  format: "esm",
  outfile: "dist/index.js",
  // minify: true,
  loader: {
    ".svg": "dataurl",
  },
  logLevel: "info",
  plugins: [solidPlugin()],
}).catch(() => process.exit(1));

[lukexor]

The build option above doesn't quite work though because of how refs are handled in non-compiled environments requiring that refs are always in callback form: https://github.com/solidjs/solid/tree/main/packages/solid/html

And even if I try to modify some components to ensure the callback form is being used, it ends up failing with undefined refs. Somehow the onMount and createEffect callbacks are being called before the ref is ever being triggered by createComponent. I haven't been able to figure out why yet - but have confirmed that setting ref on native DOM nodes and other components like Button seem to work fine with solid as-is from https://esm.sh/[email protected] which indicates something inherently incompatible with @suid for use within build-less html unless I'm missing something

[lukexor]

I was able to get a static buildless example working with the following changes:

A vite.config.ts file to packages/material:

import { defineConfig } from "vite";
import solidPlugin from "vite-plugin-solid";

export default defineConfig({
  plugins: [solidPlugin()],
  define: { "process.env.NODE_ENV": '"production"' },
  build: {
    target: "esnext",
    rollupOptions: {
      external: ["solid-js"],
    },
    lib: {
      entry: "src/index.tsx",
      formats: ["es"],
    },
  },
});

Adding "type": "module" to packages/material/package.json and then building with vite build then serving up packages/material/dist/material.js via a CDN