Beginning Shadow DOM API by 2024

Author:2024
Language: eng
Format: azw3, mobi, epub
Published: 2024-03-28T18:27:55.567000+00:00

ChapTer 2 CreaTIng ComponenTs

6. Browse to http://localhost:5173/ to view the index file

we just created – if all is well, we should see something akin to

that shown in Figure 2-4.

Figure 2-4. The original demo, now running under Vite

Do not be alarmed if you don’t see any difference from the original version of this demo – that is to be expected! Vite needs an index.html file to work correctly –

rather than creating afresh, we can reuse the one we built earlier in this chapter.

We’re making good progress, but we still have more to go! Go and have a breather, get a drink, and let’s continue with the next part of the demo when you’re ready.

66

ChapTer 2 CreaTIng ComponenTs

The next task is to push our code into a repository from which we can publish to npm. I used GitHub for this demo; if you don’t already have a suitable repository, you can sign up at https://github.com/signup. You will need to create a repository area then; please make note of the details you use so you can reference them later! As the number of files we need to push is minimal, we can simply drag and drop all of them (excluding the node_modules folder) via the upload facility at https://github.com/XXX/

YYY/upload/main, where XXX is the name of your account and YYY is the name of your repository.

I have not gone into too much detail here, as I assume you will be familiar with the basics of uploading code to git – you can do it

manually via drag and drop, from the command line, or via a subversion application. any method is fine: go with whichever you prefer!

Assuming you are successful, then let’s continue with the next part of the process.

PART 2: PUBLISHING THE COMPONENT

publishing to npm is easy – we only need to run a few commands to complete the process:

1. Crack open a command prompt or revert to the one from

the previous demo, then make sure we’re still in the same

component folder.

2. at the prompt, enter npm login -access=public, then

press enter.

3. npm will prompt you for your username, password, and email

address – go ahead and enter the details you created before

the start of the previous exercise.

67

ChapTer 2 CreaTIng ComponenTs

4. once done, enter npm publish –access=public at the

prompt, and press enter – if all is well, you will see something

similar to this appear:

npm notice

npm notice @shadowdombook/alert- [email protected]

npm notice === Tarball Contents ===

npm notice 15B README.md

npm notice 675B index.html

npm notice 738B package.json

npm notice 734B script.js

npm notice 506B styles.css

npm notice === Tarball Details ===

npm notice name: @shadowdombook/alert-

component

npm notice version: 0.1.0-alpha

npm notice filename: @shadowdombook/alert-

component-0.1.0- alpha.tgz

npm notice package size: 1.4 kB

npm notice unpacked size: 2.7 kB

npm notice shasum: a1eeaa446b703c5c1f1a8a715c745904803874cf

npm notice integrity: sha512-

nDr91vxi1BmVO[...]BoooaNydIVfaA==

npm notice total files: 5

npm notice

npm notice Publishing to https://registry.npmjs.org/

+ @shadowdombook/[email protected]

If you have 2Fa enabled, you may be prompted to supply a token –

you can do this using the same command as before but append

-otp=<your code> at the end.

68

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.