Web components #918
Web components #918
Conversation
Added 2 vite plugins, dts and file copy. Created vite config and loader to build the element. Added script command to build the button element. I thought it would be **harder** to have it build all the elements but only make one of them actually usable as a custom element, but this should give you the basic idea of the steps necessary to create a custom element using a vite.config with a ts file that loads the element. To build: - git pull - npm install - npm run build:button There are currently no build steps to automatically create an npm package and upload it for distribution To create the npm package: - cd dist/button - npm pack To use the npm package with a framework (like vue or angular): - copy the dist/button/uids-4.0.0-alpha1.tgz.tgz file created by npm pack into your new app - npm install --save uids-4.0.0-alpha1.tgz The js files should now be in a uids folder in your node_modules folder. To use the custom elements in your framework based app, in your imports do something like: ```` import HelloWorld from './components/HelloWorld.vue'; import "/node_modules/uids/banner/banner.umd.cjs"; import "/node_modules/uids/button/button.umd.cjs"; ```` To use the custom elements in a generic html file, upload the files to your server and in the `<head></head>` section of your html, do something like: ```` <script type="module" src="./button/button.umd.js"></script> <script nomodule src="./button/button.js"></script> ```` **N.B.** The server I am using does not support cjs files in its mime-types so I had to rename the file. It is probably better to create both *.umd.cjs and *.umd.js files in the vite config so that people using plain html have fewer steps to implement the elements, but for an MVP renaming the file is fine.
…into web_components_take_2
|
@rramsey When you have a chance, it would be great if you could provide instructions (you can add them to the issue summary above) that describe how to test importing from another project. I spent a little bit of time trying to figure it out, but couldn't get something running quickly. Thanks! |
Weird. It looks like github truncated my page of instructions on the commit message so they are hard to see/get to. Or they just weren't useful. Can you see the instructions at 64d1e03 ? Also not sure what you mean by importing from another project. Since build command would build a custom element under the dist folder, you'd be importing the custom element into another project. N I don't see a summary, but here is the commit message:
There are currently no build steps to automatically create an npm package and upload it for distribution To create the npm package:
To use the npm package with a framework (like vue or angular):
The js files should now be in a uids folder in your node_modules folder. To use the custom elements in your framework based app, in your imports do something like: To use the custom elements in a generic html file, upload the files to your server and in the N.B. The server I am using does not support cjs files in its mime-types so I had to rename the file. It is probably better to create both *.umd.cjs and *.umd.js files in the vite config so that people using plain html have fewer steps to implement the elements, but for an MVP renaming the file is fine. |
|
Additional Instructions For a quick test, I would recommend just incorporating the build version into a simple webpage. I'm assuming you have either an iis or apache/linux box somewhere you can sftp the file to. By doing:
The important thing to that the button should look like a big square button. If you right click and inspect the button, you should see that the element has a shadow root and it has a style embedded within the shadow root (iirc that was working in the build from these files). It should be something like:
|
|
@rramsey I'm still in the process of reviewing this, but something I'm noticing right away is that I don't think we need an independent build process for each individual component. At this point in time, we don't have the resources to manage each component having its own semantic versioning, so it is my assumption that we don't need the ability to build a component independent of all other components. |
No description provided.