How to install with preact, yet no packaging step?

[bjorn-ali-goransson]

Hello there,

I would like to have something like the standalone module package, yet store it locally. I can't use eg. vite packaging as the files need to be available as JS modules at runtime for a plugin architecture.

Apologies - my brain is kinda shutting down at the thought of how this should be done.

I'm only thinking "copy files manually from unpkg" but that isn't really professional ...

Is the way to install the NPM package and then reach into that through copying?

Do you have any tips, hint, leads? 🤔

[rschristian]

I'm only thinking "copy files manually from unpkg" but that isn't really professional ...

There's nothing wrong with that, tbh.

You can clone the repo, build it, then use something like yalc to publish & install locally. That seems to be what you're after?

[bjorn-ali-goransson]

Thanks. I believe I will use Vite with preact as "external" in order not to bundle it, and use some kind of manual copying mechanism from my node_modules.

Thank you dearly for you support!

[bjorn-ali-goransson]

Hmm ... OK; this works. Almost.

import { defineConfig } from 'vite';
import preact from '@preact/preset-vite';
import fs from 'fs';
import alias from '@rollup/plugin-alias';

export default defineConfig({
  plugins: [preact()],
  build: {
    rollupOptions: {
      external: [
        './preact-htm/standalone.module.js'
      ],
      output: {
        entryFileNames: '[name].bundle.js',
        assetFileNames: '[name].[ext]',
        chunkFileNames: '[name].[ext]'
      },
      plugins: [
        {
          name: 'copy-files',
          generateBundle: () => fs.copyFileSync('node_modules/htm/preact/standalone.module.js', '../wwwroot/preact-htm/standalone.module.js')
        },
        alias({
          entries: [
            { find: '@preact-htm', replacement: './preact-htm/standalone.module.js' }
          ]
        })
      ]
    },
    sourcemap: true,
    outDir: '../wwwroot'
  }
});

Now, my problem is that the standalone module (with both HTM and Preact prepackaged) does not include eg. hooks. How to do this? I'm guessing just package it yourself?

eg https://github.com/developit/htm/pull/134

[bjorn-ali-goransson]

Oh, wait, the standalone does include them! You just don't need to import 'preact/hooks'. I think we're good here!

[bjorn-ali-goransson]