lars
lars
Explore posts from servers
RReactifluxCC#SSolidJS
PostsComments
SSolidJS
Created by lars on 2/4/2024 in #support
Better stacktraces when using SolidJS via a library?
the pic from above is the expanded stacktrace 🥲 could it be an issue with the safari devtools on mac? i can't confirm for sure, but i believe i'm seeing a complete stacktrace for the same error on my windows machine
6 replies
SSolidJS
Created by lars on 2/4/2024 in #support
Better stacktraces when using SolidJS via a library?
basically every error within the library throws with this same stacktrace, so the stacktrace becomes unusable in helping to pinpoint where the error is. handleError is somewhere within solidjs' internal ownership-related code getting the source .ts file would be the ideal for sure, but even getting a stacktrace of the built js would be a massive improvement
6 replies
SSolidJS
Created by lars on 1/7/2024 in #support
SolidJS UI library + Astro
gimme like 10min. need to clean up a couple things first
30 replies
SSolidJS
Created by lars on 1/7/2024 in #support
SolidJS UI library + Astro
it's not at the moment. i could add you as a collaborator though?
30 replies
SSolidJS
Created by lars on 1/7/2024 in #support
SolidJS UI library + Astro
unfortunately seeing the same behavior with both extensions
30 replies
SSolidJS
Created by lars on 1/7/2024 in #support
SolidJS UI library + Astro
well shit, turns out it wasn't working at all. the issue happens when importing the UI library (that is using kobalte) in a .ts file that is then imported by a .astro file. any imports directly in the .astro file work fine even if all the exports from the UI library are hardcoded to point to the .jsx output, it still errors with No matching export in "../../node_modules/.pnpm/[email protected]/node_modules/solid-js/web/dist/server.js" for import "effect" it's strange how the file type has an effect on how the import behaves. you wouldn't happen to know anything about this @Brendonovich? i'll likely end up refactoring the ui library to export the unbuilt TS, but it's a shame that it's such a pain to get a library working if you want the build process encapsulated within the lib
30 replies
SSolidJS
Created by lars on 1/7/2024 in #support
SolidJS UI library + Astro
@Brendonovich @bigmistqke finally got it working, but anticlimactically, i can't track down what actually got it working. i have an earlier commit where i'm running the same configs, so i'm leaning towards something weird being stuck in the dist or node_modules dirs the final working config (package.json in the ui lib): 
  "scripts": {
    "build": "tsup",
  },
  "type": "module",
  "main": "./dist/index.js",
  "exports": {
    ".": {
      "solid": "./dist/index.jsx",
      "import": {
        "types": "./dist/index.d.ts",
        "default": "./dist/index.js"
      }
    },
    "./styles": "./dist/index.css"
  },
  "module": "./dist/index.js",
  "types": "./dist/index.d.ts",
  "browser": {},
  "typesVersions": {}
  "scripts": {
    "build": "tsup",
  },
  "type": "module",
  "main": "./dist/index.js",
  "exports": {
    ".": {
      "solid": "./dist/index.jsx",
      "import": {
        "types": "./dist/index.d.ts",
        "default": "./dist/index.js"
      }
    },
    "./styles": "./dist/index.css"
  },
  "module": "./dist/index.js",
  "types": "./dist/index.d.ts",
  "browser": {},
  "typesVersions": {}
tsup config: 
import { defineConfig } from 'tsup';
import * as preset from 'tsup-preset-solid';

const presetOptions: preset.PresetOptions = {
  entries: [
    {
      // Entries with a '.tsx' extension will have a generated `solid` export
      // condition.
      entry: 'src/index.tsx',
    },
  ],
};

export default defineConfig(config => {
  const parsedOptions = preset.parsePresetOptions(
    presetOptions,
    !!config.watch,
  );

  return preset.generateTsupOptions(parsedOptions);
});
import { defineConfig } from 'tsup';
import * as preset from 'tsup-preset-solid';

const presetOptions: preset.PresetOptions = {
  entries: [
    {
      // Entries with a '.tsx' extension will have a generated `solid` export
      // condition.
      entry: 'src/index.tsx',
    },
  ],
};

export default defineConfig(config => {
  const parsedOptions = preset.parsePresetOptions(
    presetOptions,
    !!config.watch,
  );

  return preset.generateTsupOptions(parsedOptions);
});
astro config is completely stock (no noExternal or anything like that) thanks again for the help 🙏
30 replies
SSolidJS
Created by lars on 1/7/2024 in #support
SolidJS UI library + Astro
damn it just does not want to work. i think i'll clone down your repo at your astro commit and gradually replace it with my own code 🥲 at least i now know that it should be possible, unless this is some regressive change in one of my deps. i'm sure you've saved me a ton of time here either way, so thank you
30 replies
SSolidJS
Created by lars on 1/7/2024 in #support
SolidJS UI library + Astro
were you using the same package.json before converting to solid start? I get an error when importing the ui lib 
The path "." is not currently exported by package "@org/ui":
The path "." is not currently exported by package "@org/ui":
if i then add a condition for import, it goes away but i then get the original error message The requested module 'solid-js/web' blah blah 
  "main": "./src/index.tsx",
  "exports": {
    ".": {
      "solid": "./src/index.tsx",
      "import": "./src/index.tsx",
      "types": "./src/index.tsx"
    }
  },
  "type": "module"
  "main": "./src/index.tsx",
  "exports": {
    ".": {
      "solid": "./src/index.tsx",
      "import": "./src/index.tsx",
      "types": "./src/index.tsx"
    }
  },
  "type": "module"
30 replies
SSolidJS
Created by lars on 1/7/2024 in #support
SolidJS UI library + Astro
like the i way i did it was adding this to the lib's package.json 
  "main": "./src/index.tsx",
  "module": "./src/index.tsx"
  "main": "./src/index.tsx",
  "module": "./src/index.tsx"
together with noExternal: ['@kobalte/core'] in the astro config (and also a workspace dep for the ui lib in the package.json)
30 replies
SSolidJS
Created by lars on 1/7/2024 in #support
SolidJS UI library + Astro
Yeah, but it’s part of a closed source monorepo for now. Are you thinking of instead eg linking the unbuilt TS via pnpm? I tried that thinking it’d for sure resolve the issue, but weirdly enough I still encountered the exports error
30 replies
SSolidJS
Created by lars on 1/7/2024 in #support
SolidJS UI library + Astro
my vague impression is that tsup-preset-solid is the most up to date way to set up UI libraries with solid right now. the config I ran looked like this: 
import { defineConfig } from 'tsup';
import * as preset from 'tsup-preset-solid';

const presetOptions: preset.PresetOptions = {
  entries: [
    {
      // Entries with a '.tsx' extension will have a generated `solid` export
      // condition.
      entry: 'src/index.tsx',
    },
  ],
};

export default defineConfig(config => {
  const parsedOptions = preset.parsePresetOptions(
    presetOptions,
    !!config.watch,
  );

  const packageFields = preset.generatePackageExports(parsedOptions);
  preset.writePackageJson(packageFields);

  return preset.generateTsupOptions(parsedOptions);
});
import { defineConfig } from 'tsup';
import * as preset from 'tsup-preset-solid';

const presetOptions: preset.PresetOptions = {
  entries: [
    {
      // Entries with a '.tsx' extension will have a generated `solid` export
      // condition.
      entry: 'src/index.tsx',
    },
  ],
};

export default defineConfig(config => {
  const parsedOptions = preset.parsePresetOptions(
    presetOptions,
    !!config.watch,
  );

  const packageFields = preset.generatePackageExports(parsedOptions);
  preset.writePackageJson(packageFields);

  return preset.generateTsupOptions(parsedOptions);
});
this automatically writes these properties to the package.json (including a condition for solid - but it'd still end up with the export error above) 
  "main": "./dist/index.js",
  "module": "./dist/index.js",
  "types": "./dist/index.d.ts",
  "exports": {
    "solid": "./dist/index.jsx",
    "import": {
      "types": "./dist/index.d.ts",
      "default": "./dist/index.js"
    }
  },
  "type": "module",
  "browser": {},
  "typesVersions": {}
  "main": "./dist/index.js",
  "module": "./dist/index.js",
  "types": "./dist/index.d.ts",
  "exports": {
    "solid": "./dist/index.jsx",
    "import": {
      "types": "./dist/index.d.ts",
      "default": "./dist/index.js"
    }
  },
  "type": "module",
  "browser": {},
  "typesVersions": {}
30 replies
SSolidJS
Created by lars on 1/7/2024 in #support
SolidJS UI library + Astro
it is, I just mean that noExternal might be the workaround if you directly consume astro + solid + kobalte in an astro app, rather than importing a library that uses solid + kobalte
30 replies
SSolidJS
Created by lars on 1/7/2024 in #support
SolidJS UI library + Astro
i came across that bit of info as well, but it unfortunately didn't seem to have an effect with my setup what i'm a little afraid of is that adding @kobalte/core to noExternal might only get things working if you were using astro + solid + kobalte all in a single Astro app
30 replies
SSolidJS
Created by lars on 7/4/2023 in #support
Manually mounting SolidJS component within HTML component via `render`
pt2 The parseTemplate fn is where the real magic happens. It compiles the template with Handlebars (a templating engine), and then afterwards SolidJS components are mounted into the compiled HTML 
export function parseTemplate(
  template: string,
  options: {
    bindings: {
      strings?: Record<string, string | number>;
      components?: Record<string, () => JSXElement>;
    };
  },
): HTMLElement {
  const compiledTemplate = handlebars.compile(
    template,
    options.bindings.strings ?? {},
  );

  // Create a div from the compiled template.
  const element = document.createElement('div');
  element.innerHTML = compiledTemplate;

  const componentBindings = Object.entries(options.bindings.components ?? {});

  for (const [componentName, component] of componentBindings) {
    // Get element to mount for the component.
    const mount = getElementByText(element, `{{ ${componentName} }}`);

    if (mount) {
      render(component, mount); // render from "solid-js/web"
    }
  }

  return element;
}
export function parseTemplate(
  template: string,
  options: {
    bindings: {
      strings?: Record<string, string | number>;
      components?: Record<string, () => JSXElement>;
    };
  },
): HTMLElement {
  const compiledTemplate = handlebars.compile(
    template,
    options.bindings.strings ?? {},
  );

  // Create a div from the compiled template.
  const element = document.createElement('div');
  element.innerHTML = compiledTemplate;

  const componentBindings = Object.entries(options.bindings.components ?? {});

  for (const [componentName, component] of componentBindings) {
    // Get element to mount for the component.
    const mount = getElementByText(element, `{{ ${componentName} }}`);

    if (mount) {
      render(component, mount); // render from "solid-js/web"
    }
  }

  return element;
}
The issue I'm facing is that the manually mounted SolidJS components don't seem to be "wired up" correctly. Their onCleanup hooks aren't being called. Is there a correct way to insert the SolidJS components in the parsed HTML rather than just calling render()?
3 replies
SSolidJS
Created by lars on 6/28/2023 in #support
Losing reactivity in props passed to `children` callback
solved by passing the memo to props.children without actually invoking the memo 
export interface ParentProps {
  children: (cb: { someDerivedProperty: string }) => void;
}

export function Parent(props: ParentProps) {
  ...
  return props.children(myMemo); // not invoking the memo this time
}

<Parent myStore={store}>
  {(props) => (
    <Child {...props()} />
  )}
</Parent>
export interface ParentProps {
  children: (cb: { someDerivedProperty: string }) => void;
}

export function Parent(props: ParentProps) {
  ...
  return props.children(myMemo); // not invoking the memo this time
}

<Parent myStore={store}>
  {(props) => (
    <Child {...props()} />
  )}
</Parent>
2 replies
SSolidJS
Created by lars on 5/10/2023 in #support
updating a tree of nodes in a SolidJS store
wow, thank you for such a detailed response 🙌 🙌 i'll have a look through your links
4 replies
SSolidJS
Created by lars on 5/1/2023 in #support
parent route with redirect (solid-router)?
late reply, but thank you!! @mdynnl 👌
4 replies
SSolidJS
Created by lars on 3/12/2023 in #support
Monorepo error with SolidStart `__vite_ssr_import_0__.template is not a function`
ah, i was copying hope ui's build configs assuming that they supported ssr. turns out they don't rip haha
7 replies
SSolidJS
Created by lars on 3/12/2023 in #support
Monorepo error with SolidStart `__vite_ssr_import_0__.template is not a function`
any ideas on how to support SSR via the vite config? it outputs esm + cjs so i can't understand what could possibly be the issue here. all it exports is a button component 
import path from 'path';
import { defineConfig } from 'vite';
import dtsPlugin from 'vite-plugin-dts';
import solidPlugin from 'vite-plugin-solid';

import pkg from './package.json';

export default defineConfig({
  plugins: [
    solidPlugin(),
    dtsPlugin({
      tsConfigFilePath: 'tsconfig.json',
      insertTypesEntry: true,
      noEmitOnError: true,
      skipDiagnostics: false,
    }),
  ],
  build: {
    lib: {
      entry: path.resolve(__dirname, './src/index.ts'),
      formats: ['es', 'cjs'],
      fileName: format => (format === 'es' ? 'index.mjs' : 'index.cjs'),
    },
    rollupOptions: {
      external: [
        ...Object.keys(pkg.dependencies),
        ...Object.keys(pkg.peerDependencies),
        'solid-js/web',
        'solid-js/store',
      ],
    },
  },
});
import path from 'path';
import { defineConfig } from 'vite';
import dtsPlugin from 'vite-plugin-dts';
import solidPlugin from 'vite-plugin-solid';

import pkg from './package.json';

export default defineConfig({
  plugins: [
    solidPlugin(),
    dtsPlugin({
      tsConfigFilePath: 'tsconfig.json',
      insertTypesEntry: true,
      noEmitOnError: true,
      skipDiagnostics: false,
    }),
  ],
  build: {
    lib: {
      entry: path.resolve(__dirname, './src/index.ts'),
      formats: ['es', 'cjs'],
      fileName: format => (format === 'es' ? 'index.mjs' : 'index.cjs'),
    },
    rollupOptions: {
      external: [
        ...Object.keys(pkg.dependencies),
        ...Object.keys(pkg.peerDependencies),
        'solid-js/web',
        'solid-js/store',
      ],
    },
  },
});
7 replies