{"id":15842,"library":"subapp-pbundle","title":"Electrode Subapp for Preact and Redux Bundler","description":"This module, `subapp-pbundle`, version 1.1.1, serves as an integration layer for Electrode subapps utilizing the Preact UI framework and `redux-bundler` for state management. It essentially re-exports core functionalities from `subapp-web` and adapts them for Preact, including re-exporting Preact's `h`, `Component`, and `render` APIs for convenience. A key differentiator is its `reduxBundlerLoadSubApp` API, specifically designed for loading `redux-bundler`-based subapps within the Electrode ecosystem. The package is primarily distributed as ES modules, advocating for modern bundling practices like tree-shaking. While it provides server-side rendering (SSR) context support via `AppContext`, further support for advanced features like React Router and Preact Suspense remains \"TBD,\" suggesting a slower release cadence or a maintenance-focused development cycle since its initial release around 2016 by WalmartLabs.","status":"maintenance","version":"1.1.1","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","web","react","subapp","redux","react-router"],"install":[{"cmd":"npm install subapp-pbundle","lang":"bash","label":"npm"},{"cmd":"yarn add subapp-pbundle","lang":"bash","label":"yarn"},{"cmd":"pnpm add subapp-pbundle","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required as a peer dependency for the Preact UI framework.","package":"preact","optional":false},{"reason":"Required as a peer dependency for server-side rendering with Preact.","package":"preact-render-to-string","optional":false},{"reason":"Provides Babel helper functions for transpiled ES5 code.","package":"@babel/runtime","optional":false}],"imports":[{"note":"The package is ESM-only; CommonJS require() will not work for named exports.","wrong":"const { h, reduxBundlerLoadSubApp } = require('subapp-pbundle');","symbol":"h, reduxBundlerLoadSubApp","correct":"import { h, reduxBundlerLoadSubApp } from 'subapp-pbundle';"},{"note":"AppContext is a Preact Context object for SSR data, and requires ES Module import.","wrong":"const { AppContext } = require('subapp-pbundle');","symbol":"AppContext","correct":"import { AppContext } from 'subapp-pbundle';"},{"note":"For convenience, core Preact APIs 'Component' and 'render' are re-exported from 'subapp-pbundle'.","wrong":"import { Component, render } from 'preact';","symbol":"Component, render","correct":"import { Component, render } from 'subapp-pbundle';"}],"quickstart":{"code":"/** @jsx h */\nimport { h, reduxBundlerLoadSubApp, AppContext } from \"subapp-pbundle\";\nimport { useState } from 'preact/hooks'; // Assuming preact/hooks is also available\n\nconst MyPreactComponent = () => {\n const [count, setCount] = useState(0);\n return (\n \n {({ isSsr, ssr, subApp }) => (\n
\n

My Electrode Subapp

\n

Current count: {count}

\n \n

Running on SSR: {`${Boolean(isSsr)}`}

\n {isSsr && ssr && ssr.request &&

Request URL: {ssr.request.url ?? 'N/A'}

}\n

Subapp name: {subApp?.name ?? 'Unknown'}

\n
\n )}\n \n );\n};\n\nexport default reduxBundlerLoadSubApp({ name: \"MyComponent\", Component: MyPreactComponent });","lang":"javascript","description":"Demonstrates defining an Electrode subapp with Preact, using `reduxBundlerLoadSubApp` and accessing SSR context via `AppContext`."},"warnings":[{"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.","message":"This package is distributed as ES Modules (ESM) only. Attempting to use CommonJS `require()` syntax will result in errors.","severity":"breaking","affected_versions":">=1.0.0"},{"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`.","message":"`preact` and `preact-render-to-string` are declared as peer dependencies and must be installed explicitly in your project's `package.json`.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"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`.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"search_vec":"'1.1.1':14 '2016':143 'adapt':47 'advanc':116 'advoc':92 'api':61,70 'appcontext':112 'around':142 'base':78 'bundl':95 'bundler':7,31,77 'cadenc':130 'compon':58 'context':109 'conveni':63 'core':40 'cycl':137 'design':72 'develop':136 'differenti':66 'distribut':88 'ecosystem':83 'electrod':1,21,82 'es':90 'essenti':36 'export':39,54 'featur':117 'focus':135 'framework':27 'function':41 'h':57 'includ':51 'initi':140 'integr':18 'javascript':146 'key':65 'layer':19 'like':97,118 'load':74 'mainten':134 'maintenance-focus':133 'manag':34 'modern':94 'modul':9,91 'packag':85 'pbundl':12 'practic':96 'preact':4,25,50,55,122 'primarili':87 'provid':103 're':38,53 're-export':37,52 'react':119,148,152 'react-rout':151 'redux':6,30,76,150 'redux-bundl':29,75 'reduxbundlerloadsubapp':69 'releas':129,141 'remain':124 'render':60,107 'router':120,153 'serv':15 'server':105 'server-sid':104 'shake':100 'side':106 'sinc':138 'slower':128 'specif':71 'ssr':108 'state':33 'subapp':2,11,22,44,79,149 'subapp-pbundl':10 'subapp-web':43 'suggest':126 'support':110,114 'suspens':123 'tbd':125 'tree':99 'tree-shak':98 'ui':26 'util':23 'version':13 'via':111 'walmartlab':145 'web':45,147 'within':80","created_at":"2026-04-21T18:00:17.193799+00:00","updated_at":"2026-04-21T18:00:17.193799+00:00","problems":[{"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.","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.","error":"SyntaxError: Cannot use import statement outside a module"},{"fix":"Run `npm install preact preact-render-to-string` or `yarn add preact preact-render-to-string` in your project's root directory.","cause":"The peer dependencies `preact` or `preact-render-to-string` are not installed in the consuming project's `node_modules`.","error":"Error: Cannot find module 'preact' or 'Error: Cannot find module 'preact-render-to-string''"},{"fix":"Include a polyfill for ES6+ features in your application. Common solutions include `core-js` or a service like `polyfill.io`.","cause":"The runtime environment (e.g., older browser, specific Node.js version) is missing global ES6+ APIs like `Promise` or array iteration methods.","error":"ReferenceError: Promise is not defined"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":null,"docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/subapp-pbundle","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-20","install_tag":null}}