Erfan Posts - Answer Overflow

Erfan

Explore posts from servers

•Created by Erfan on 5/13/2025 in #support

Rendering dynamic components

Hi Solid community, I could really use your help: Here’s the situation:

function Button(props) {
  return (() => {
    var _el$ = _tmpl$();
    addEventListener(_el$, "click", props.onclick);
    insert(_el$, () => props.value, null);
    insert(_el$, () => props.children, null);
    createRenderEffect(() => className(_el$, button(props.variant)));
    return _el$;
  })();
}
delegateEvents(["click"]);
export {
  Button as default
};

function Button(props) {
  return (() => {
    var _el$ = _tmpl$();
    addEventListener(_el$, "click", props.onclick);
    insert(_el$, () => props.value, null);
    insert(_el$, () => props.children, null);
    createRenderEffect(() => className(_el$, button(props.variant)));
    return _el$;
  })();
}
delegateEvents(["click"]);
export {
  Button as default
};

I’d like to dynamically create these buttons (just an example 😅 ) and nest them into each other at runtime as needed. So I thought I’d store a list of these components in a signal and simply render the children in code like this:

const children = signal([]);
const templates: SolidTemplate[] = [];

function renderChildren(template: SolidTemplate) {
  templates.push(template);
  children[1](templates);
}

function init() {
  const [getChildren] = children;
  const c = solidjs.createComponent(() => getChildren());
  solidjs.render(() => c, document.getElementById("app"));
}

const children = signal([]);
const templates: SolidTemplate[] = [];

function renderChildren(template: SolidTemplate) {
  templates.push(template);
  children[1](templates);
}

function init() {
  const [getChildren] = children;
  const c = solidjs.createComponent(() => getChildren());
  solidjs.render(() => c, document.getElementById("app"));
}

Unfortunately, it doesn’t work — nothing gets rendered, and I’m not sure why. Thanks 🙏

38 replies

DDeno

•Created by Erfan on 5/7/2025 in #help

Deno 2.4 emit for bundling with "npm:" imports inside code

Hi People, i try to bundle my code with Deno emit. Inside my code i am using packages from npm, like npm:solid-js@^1.9.6. It looks like the loader from bundle can not resolve the package. Does someone know, if it is somehow possible to make it work ? The Error: Bundler.loader.load(npm:solid-js@^1.9.6) failed: Module "npm:solid-js@^1.9.6" was an unsupported module kind.

3 replies

Gaming

Programming