I am currently developing a unique alternative to Storybook called Storybook-like package named playground. This package is intended to be installed as a dependency into other packages, such as foo-products or bar-products.
My goal is to enable the functionality where running the command playground play from within the foo-products package initiates a Vite app in development mode. This app should utilize components from both the playground and foo-products packages to create a platform for interacting with the components in the foo-products package.
To achieve this, I need to establish a mechanism for seamlessly integrating components from the foo-products package into the Vite app within the playground package.
In my envisioned monorepo setup:
monorepo
- playground
- cli.js
- index.html
- index.ts
- SiteBuilderModule.ts
- foo-products
- .play
- play.config.ts
- FooModule.ts
The play.config.ts file in the foo-products package will define the functions or components to be utilized on the playground site:
// foo-products: play.config.ts
import { fooFunc } from 'FooModule';
export default {
functions: [fooFunc, /* ... */]
}
Next, I must find a way to receive these functions in the index.ts file within the playground package:
// playground: index.ts
import { functions } from '...???...'; // Receive `functions` from `foo-products:play.config.ts`
functions.each(func => console.log(func)); // fooFunc, ...
Lastly, the creation of a Vite app when executing the playground play command in the foo-products package necessitates a cli.js. Although unsure about the steps needed, I have referenced code snippets from the Vite documentation.
// playground: cli.js
#!/usr/bin/env node
import { fileURLToPath } from 'node:url'
import { createServer } from 'vite'
console.log('Starting Playground Vite App!');
const __dirname = fileURLToPath(new URL('.', import.meta.url))
const server = await createServer({
configFile: false,
root: __dirname,
server: {
port: 1337,
},
})
await server.listen()
server.printUrls()
server.bindCLIShortcuts({ print: true })
The main question now revolves around configuring the cli.js to locate the play.config.ts in the foo-products package, extract the functions, and pass them to the index.ts to facilitate the creation of a multi-package Vite app.