SolidJS•7mo ago

Load unknown jsx component after building

I have a component that can take tabs components with their content from other files without knowing them by advance but I need it to work after building. More specifically, I'm already able to do it all in one piece, each tab is a .jsx from another directory, but I can't do it by individually build each part and the main page I need a built main page than can take my jsx tabs (built or not it doesn't matters) without knowing them by advance, completely independently

14 Replies

bigmistqke 🌈•7mo ago

🤔 not sure what you are trying to do

Yvorie•7mo ago

I want my built app being able to load some new tabs element I would create after, but without needing to do anything to the main built app, by adding them in a specific directory and the built app would pick them automatically

bigmistqke 🌈•7mo ago

interesting approach if it's about splitting the bundle i would do it with lazyloading

Yvorie•7mo ago

but you need to know the modules you want to lazy load, here I need to not knowing them

bigmistqke 🌈•7mo ago

ye exactly but ur gonna do ssr right? then u can glob it during request or how were u planning to fetch those modules? na ur right paths can't be dynamic with lazy, kinda makes sense

Yvorie•7mo ago

those modules would appear in a directory (as jsx or built it doesn't matters for now) I'm already able to import them dynamically from the directory but only with everything in the same app

bigmistqke 🌈•7mo ago

but u wanna have it more as a microfrontend architecture

Yvorie•7mo ago

yes something like that, but I'm not sure if it's possible

bigmistqke 🌈•7mo ago

it's for sure possible, mb not with good dx

Yvorie•7mo ago

dx?

bigmistqke 🌈•7mo ago

developer experience ok gotta work now but will come back to it later if nobody else answered in the meantime

Yvorie•7mo ago

ok thx

bigmistqke 🌈•7mo ago

hey yvorie

import { For, Suspense, VoidComponent, createResource, type Component } from 'solid-js';

const App: Component = () => {
  const [tabs] = createResource<VoidComponent[]>(() => Promise.all(["tab1", "tab2"].map(tab => import('./tabs/' + tab).then(module => module.default))))
  
  return (
    <Suspense>
      <For each={tabs()}>{
        (Tab) => <Tab/>
      }</For>
    </Suspense>
  );
};

export default App;

import { For, Suspense, VoidComponent, createResource, type Component } from 'solid-js';

const App: Component = () => {
  const [tabs] = createResource<VoidComponent[]>(() => Promise.all(["tab1", "tab2"].map(tab => import('./tabs/' + tab).then(module => module.default))))
  
  return (
    <Suspense>
      <For each={tabs()}>{
        (Tab) => <Tab/>
      }</For>
    </Suspense>
  );
};

export default App;

this works! i can't show it in playground, bc dynamic imports are not fully supported there but https://github.com/bigmistqke/lazy-loading-components-test

Yvorie•7mo ago

OH thx !! I'll try asap but I can't now

Gaming

Programming

Load unknown jsx component after building