Electrode Subapp for Preact and Redux Bundler

Common errors

• SyntaxError: Cannot use import statement outside a module

  cause Attempting to use `import` or `export` syntax in a CommonJS (`.js` without `"type": "module"` in `package.json` or a `.cjs` file) Node.js environment.
  fix Rename your file to `.mjs`, add `"type": "module"` to your `package.json`, or configure your build system (e.g., Webpack) to correctly handle ESM modules.

• Error: Cannot find module 'preact' or 'Error: Cannot find module 'preact-render-to-string''

  cause The peer dependencies `preact` or `preact-render-to-string` are not installed in the consuming project's `node_modules`.
  fix Run `npm install preact preact-render-to-string` or `yarn add preact preact-render-to-string` in your project's root directory.

• ReferenceError: Promise is not defined

  cause The runtime environment (e.g., older browser, specific Node.js version) is missing global ES6+ APIs like `Promise` or array iteration methods.
  fix Include a polyfill for ES6+ features in your application. Common solutions include `core-js` or a service like `polyfill.io`.

Warnings

• breaking This package is distributed as ES Modules (ESM) only. Attempting to use CommonJS `require()` syntax will result in errors.
  Fix: Ensure your project uses ES module syntax (`import`/`export`) and is configured for ESM. Modern bundlers like Webpack 4+ or Rollup handle this automatically, but legacy environments might require specific configuration.
• gotcha `preact` and `preact-render-to-string` are declared as peer dependencies and must be installed explicitly in your project's `package.json`.
  Fix: Install `preact` and `preact-render-to-string` using your package manager: `npm install preact preact-render-to-string` or `yarn add preact preact-render-to-string`.
• gotcha The package assumes the presence of polyfills for modern ES6+ APIs (e.g., `Promise`, Array methods) in the runtime environment. These are not bundled with `subapp-pbundle`.
  Fix: Integrate a polyfill service like `polyfill.io` or include necessary polyfills (e.g., using `core-js` with Babel) in your application's build process to ensure broad browser compatibility.

Install

• npm install subapp-pbundle npm
• yarn add subapp-pbundle yarn
• pnpm add subapp-pbundle pnpm

Imports

• h, reduxBundlerLoadSubApp
  wrong:

  const { h, reduxBundlerLoadSubApp } = require('subapp-pbundle');

  correct:

  import { h, reduxBundlerLoadSubApp } from 'subapp-pbundle';

  The package is ESM-only; CommonJS require() will not work for named exports.
• AppContext
  wrong:

  const { AppContext } = require('subapp-pbundle');

  correct:

  import { AppContext } from 'subapp-pbundle';

  AppContext is a Preact Context object for SSR data, and requires ES Module import.
• Component, render
  wrong:

  import { Component, render } from 'preact';

  correct:

  import { Component, render } from 'subapp-pbundle';

  For convenience, core Preact APIs 'Component' and 'render' are re-exported from 'subapp-pbundle'.

Quickstart

Demonstrates defining an Electrode subapp with Preact, using `reduxBundlerLoadSubApp` and accessing SSR context via `AppContext`.

/** @jsx h */
import { h, reduxBundlerLoadSubApp, AppContext } from "subapp-pbundle";
import { useState } from 'preact/hooks'; // Assuming preact/hooks is also available

const MyPreactComponent = () => {
  const [count, setCount] = useState(0);
  return (
    <AppContext.Consumer>
      {({ isSsr, ssr, subApp }) => (
        <div>
          <h1>My Electrode Subapp</h1>
          <p>Current count: {count}</p>
          <button onClick={() => setCount(count + 1)}>Increment</button>
          <p>Running on SSR: {`${Boolean(isSsr)}`}</p>
          {isSsr && ssr && ssr.request && <p>Request URL: {ssr.request.url ?? 'N/A'}</p>}
          <p>Subapp name: {subApp?.name ?? 'Unknown'}</p>
        </div>
      )}
    </AppContext.Consumer>
  );
};

export default reduxBundlerLoadSubApp({ name: "MyComponent", Component: MyPreactComponent });