@firewave/uibricks v0.0.4

Svelte UI Library

How to create an UI Lib

Information based on the first half of this video Rich Harris Svelte Cubed

• Install Typescript >= 4.0.0 & svelte2tsx >= 0.4.1
• Add lib folder
• Add index.js in lib folder to reexport your components so that the can be used as named exports
• Add the following vite & package config to your svelte.config.js

...
kit: {
  adapter: adapter(),

  // hydrate the <div id="svelte"> element in src/app.html
  target: '#svelte',

  package: {
   // files which should included in the package (or here which one should be excluded)
   // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
   files: (file) => !file.startsWith('demo'),
   // we would only like named exports to we set here the index.js which was added by us in the "lib" folder
   // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
   exports: (file) => file === 'index.js'
  },

  vite: {
   resolve: {
    alias: {
     uibricks: path.resolve('src/lib')
    }
   }
  }
 }
...

• Add the following paths to your tsconfig.json to please the typescript compiler & VSCode so that you can use the same import as then in the other projects.

...
"paths": {
   "$lib": ["src/lib"],
   "$lib/*": ["src/lib/*"],
   "uibricks": ["src/lib/index.js"],
   "uibricks/*": ["src/lib/*"]
  }
...

• Run npm run package. This should create a package folder in your root
• Now you can run npm publish to publish your UI Library to npm