SolidJS•14mo 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•14mo ago

🤔 not sure what you are trying to do

YvorieOP•14mo 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•14mo ago

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

YvorieOP•14mo ago

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

bigmistqke•14mo 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

YvorieOP•14mo 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•14mo ago

but u wanna have it more as a microfrontend architecture

YvorieOP•14mo ago

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

bigmistqke•14mo ago

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

YvorieOP•14mo ago

dx?

bigmistqke•14mo ago

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

YvorieOP•14mo ago

ok thx

bigmistqke•14mo 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

YvorieOP•14mo ago

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

Gaming

Programming

Load unknown jsx component after building

Did you find this page helpful?