Design with web components. Assemble your pallette, paint your thoughts in the browser
npm install wc-studioFirst install the wc-studio package:
``bash
$ npm install wc-studio --save-dev
$ pnpm install wc-studio
`
Then add the CLI scripts to your package.json scripts:
`json`
{
scripts: {
"studio:start": "wc-studio start",
"studio:build": "wc-studio build"
}
}
wc-studio is distributed as a modern JS package and as an ES module package. Configuring wc-studio will require ES module format (export syntax) so it is a good idea to also make sure the package.json of your project has "type": "module" so that nodeJS will treat all .js files in your project as ES module imports.
wc-studio needs some configuration to get up and running. So add a studio.config.js file to the root of your project.
Here is a short version of the config. A detailed explanation of configuration properties is further below:
`jssl-theme-dark
export default {
components: './src/components.js',
customHints: './src/hints.js',
snippets: './src/snippets.js',
outputPath: './dist',
publicAssetsRoots: [
{
src: './node_modules/@shoelace-style/shoelace/dist/assets/icons/*',
dest: 'shoelace/assets/icons'
}
],
darkModeCallback: (newMode) => {
document.documentElement.classList.remove();sl-theme-light
document.documentElement.classList.remove();
if(newMode !== 'system') {
document.documentElement.classList.add(sl-theme-${newMode});sl-theme-${darkMode.matches ? 'dark' : 'light'}
} else {
const darkMode = matchMedia('(prefers-color-scheme: dark)');
document.documentElement.classList.add();
}
},
initialMode: 'dark',
port: 9000,
openBrowser: true,
paramType: 'search',
favicon: './src/images/favicon.svg',
widths: [320, 600, 960, 1028, 1200],
exampleCode:
this is an example
,
iframeSandbox: 'allow-scripts allow-same-origin',
}
``