I am trying to create my simple Storybook-like alternative package called playground which is installed as dependency into other packages like foo-products or bar-products.

When I run playground play command from inside foo-products package I want to create running Vite app in dev mode which uses components located in playground package to build a site to play with components located in foo-products package.

This means I have to somehow launch a Vite app in such a way so it can use components both from playground and foo-products packages. More specifically I think I need to somehow “send” components from foo-products to Vite app in playground.

Let’s say I have the following monorepo structure:

monorepo
- playground
  - cli.js
  - index.html
  - index.ts
  - SiteBuilderModule.ts

- foo-products
  - .play
    - play.config.ts
  - FooModule.ts

In play.config.ts I want to tell, which functions or components will be used on playground site:

// foo-products: play.config.ts

import { fooFunc } from 'FooModule';

export default {
    functions: [fooFunc, /* ... */]
}

Now I need to somehow receive these functions in index.ts file in playground package:

// playground: index.ts

import { functions } from '...???...'; // Receive `functions` from `foo-products:play.config.ts`

functions.each(func => console.log(func)); // fooFunc, ...

Finally, I need a cli.js to create Vite app when running playground play command inside foo-products package. I just copied code from Vite docs since I really don’t know what to do here…

// 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({
  // any valid user config options, plus `mode` and `configFile`
  configFile: false,
  root: __dirname,
  server: {
    port: 1337,
  },
})
await server.listen()

server.printUrls()
server.bindCLIShortcuts({ print: true })

How do I configure cli.js so it can detect play.config.ts file in foo-products package, take functions from it and pass it to index.ts to create multi-package Vite app?