getting started with solid-element #2127

georgfaust · 2024-04-14T11:43:17Z

georgfaust
Apr 14, 2024

I can setup a solid-app with

npx degit solidjs/templates/ts my-app

What do I have to do to make a minimal solid-element example work?

What I have done

npm install solid-element

public/index.html

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>My Solid App</title>
    <!-- ??? -->
    <script type="???" src="???"></script>
</head>
<body>
    HELLO WORLD!
    <my-element></my-element>
</body>
</html>

src/my-element.js

import { defineElement } from 'solid-element';

defineElement('my-element', () => {
  return <div>Hello from My Element!</div>;
});

What do I have to change in the vite-config to make this work?
(the docs assume, that you are an expert in JS-toolchains, not everybody is, I am certainly not)

Answered by georgfaust

Apr 18, 2024

./src/my-element.jsx

import { customElement } from 'solid-element';

customElement('my-element', () => {
  return <div>Hello from My Element!</div>;
});

./index.html

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>My Solid App</title>
    <script type="module" src="./dist/my-element.es.js"></script>
</head>
<body>
    <my-element></my-element>
</body>
</html>

./vite.config

import { defineConfig } from 'vite';
import solidPlugin from 'vite-plugin-solid';

export default defineConfig({
  plugins: [solidPlugin(),],
  server: { port: 3000 },
  build: {
    lib: {
      entry: './src/my-element.jsx',
      name: 'myElement',
      fileName: (format) => `my-element.${format}.js`,…

View full answer

georgfaust · 2024-04-18T18:28:01Z

georgfaust
Apr 18, 2024
Author

./src/my-element.jsx

import { customElement } from 'solid-element';

customElement('my-element', () => {
  return <div>Hello from My Element!</div>;
});

./index.html

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>My Solid App</title>
    <script type="module" src="./dist/my-element.es.js"></script>
</head>
<body>
    <my-element></my-element>
</body>
</html>

./vite.config

import { defineConfig } from 'vite';
import solidPlugin from 'vite-plugin-solid';

export default defineConfig({
  plugins: [solidPlugin(),],
  server: { port: 3000 },
  build: {
    lib: {
      entry: './src/my-element.jsx',
      name: 'myElement',
      fileName: (format) => `my-element.${format}.js`,
    },
    target: 'esnext',
  },
});

npm install
npm run build
# open index.html in browser

https://github.com/georgfaust/minimal-solid-element

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

getting started with solid-element #2127

{{title}}

Replies: 1 comment

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

getting started with solid-element #2127

georgfaust Apr 14, 2024

Replies: 1 comment

georgfaust Apr 18, 2024 Author

georgfaust
Apr 14, 2024

georgfaust
Apr 18, 2024
Author