search

uiowa / uids

UI Design System
http://uids.brand.uiowa.edu
7 stars 1 forks source link

Web components #918

Open pyrello opened 9 months ago

pyrello commented 9 months ago

@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!

rramsey commented 9 months ago

@rramsey it would be great if you could provide instructions that describe how to test importing from another project.

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 https://github.com/uiowa/uids/pull/918/commits/64d1e03ec998f1e408251da49e27148ea0f8e06a ?

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: To build:

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:

  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.

rramsey commented 9 months ago

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:

  1. Build with: npm run build:button.
  2. cd dist\button
  3. npm pack
  4. Create a new directory somewhere; I'll just use NewDir
  5. Copy the dist\button folder into NewDir, so you have NewDir\button\button.js etc.
  6. Copy button.umd.cjs to button.umd.js in case your server doesn't have the correct mime type for cjs files. Our vm from ITS didn't.
  7. Create NewDir\index.html and pop open notepad++ or vi or emacs or even plain notepad.
  8. Create a basic hello world skeleton.
  9. In the <head> add: 
    <script type="module" src="./button/button.umd.js"></script>
<script nomodule src="./button/button.js"></script>
  10. In the <body>, something like: 
    <p>Hello world, look at my button:</p>
<uiowa-button>I'm a button</uiowa-button>
  11. Copy NewDir up to your server.
  12. If you load it up in chrome, you should see something like https://csiapi-test.its.uiowa.edu/rramsey/custom-elements/uids/. This is a slightly different set of files as I was testing out some compile options, but the principle is the same.

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:

image

pyrello commented 9 months ago

@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.