1. Create the Widget (JavaScript or TypeScript) Start by creating a simple widget. For this example, let's assume we're building a JavaScript widget that displays a message inside a .

Example Widget Code: javascript Copiar código // my-widget.js

(function() { // Create a simple widget function function createWidget(elementId, message) { const container = document.getElementById(elementId);

if (!container) {
  console.error(`Element with ID "${elementId}" not found`);
  return;
}

// Create a new div and set its content
const widgetElement = document.createElement('div');
widgetElement.style.padding = '20px';
widgetElement.style.backgroundColor = '#f0f0f0';
widgetElement.style.border = '1px solid #ddd';
widgetElement.textContent = message;

// Append the widget to the container
container.appendChild(widgetElement);

}

// Expose the widget globally so it can be called from the page window.MyWidget = { create: createWidget }; })(); In this code:

The createWidget function takes an elementId and a message. It creates a new element and appends it to the element specified by the elementId. This is wrapped in an IIFE (Immediately Invoked Function Expression) to avoid polluting the global namespace. 2. Set Up npm and Package.json To publish your widget on UNPKG, you'll need to have an npm package. Here's how to set it up:

Initialize npm: Run the following command in the root directory of your widget project:

bash Copiar código npm init This will create a package.json file. When prompted, provide the necessary information like package name, version, description, etc.

Ensure that your package.json has the following fields at a minimum:

json Copiar código { "name": "my-widget", // Unique name of your widget "version": "1.0.0", "main": "my-widget.js", // The entry point to your widget "description": "A simple widget example", "author": "Your Name", "license": "MIT" } 3. Publish the Package on npm Before publishing to npm, you need to have an account on npm. If you don't have one, create an account.

Login to npm: bash Copiar código npm login Provide your npm username, password, and email.

Publish the Package: Once logged in, you can publish your package by running the following command:

bash Copiar código npm publish --access public This will make your package available on npm, and since UNPKG serves npm packages, it will also become available on UNPKG.

4. Access the Widget on UNPKG Once your package is published, it can be accessed via the UNPKG CDN. The URL will be:

perl Copiar código https://unpkg.com/ For example, if your package is named my-widget and is at version 1.0.0, you can access the widget script via:

perl Copiar código https://unpkg.com/[email protected]/my-widget.js You can use the latest keyword to always load the latest version of your package:

perl Copiar código https://unpkg.com/my-widget@latest/my-widget.js 5. Usage Example for Consumers Once published, anyone can load your widget via a tag and use it in their HTML:

html Copiar código

6. Updating the Widget If you make changes to your widget, you can publish a new version by updating the version number in package.json (e.g., 1.0.1) and running:

bash Copiar código npm publish Summary of Steps: Write your widget in JavaScript/TypeScript. Create a package.json using npm init. Publish your package to npm with npm publish. Access your widget via UNPKG using the URL format: https://unpkg.com/. Consumers can load and use your widget via a tag.