@ladrillosjs/build

v0.1.0-beta.1

Published

10 days ago

Optional standalone Web Component publishing compiler for LadrillosJS HTML components.

0High
0Medium
0Low

Hello World with LadrillosJS

Write a component in HTML. Use it without a build step. When you want to share it, @ladrillosjs/build turns it into a standalone Web Component that needs no Ladrillos runtime.

Requires Node.js 20.19+ for the commands below.

1. Create Your First Component

mkdir hello-ladrillos
cd hello-ladrillos
npm init -y

Create hello-world.html:

<p>Hello, {name}!</p>

<script>
  let name = "World";
</script>

Create index.html beside it:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello Ladrillos</title>
  </head>
  <body>
    <hello-world name="Ladrillos"></hello-world>
    <script type="module">
      import { registerComponent } from "https://cdn.jsdelivr.net/npm/ladrillosjs@2/dist/index.js";
      registerComponent("hello-world", "./hello-world.html");
    </script>
  </body>
</html>

Start a static server:

npx serve . -l 3000

Open http://localhost:3000. You should see Hello, Ladrillos! No compilation needed. Stop the server with Ctrl+C before the next commands.

2. Build a Standalone Component

Once the builder beta is published, install it in hello-ladrillos:

npm install --save-dev @ladrillosjs/build@beta

If you are publishing the builder for the first time, follow Publish the Builder Beta below first.

Create ladrillos.build.json. Replace YOUR_NPM_USERNAME with your npm username or an organization scope you can publish to:

{
  "name": "@YOUR_NPM_USERNAME/hello-world",
  "version": "0.1.0-beta.1",
  "outDir": "dist",
  "components": {
    "hello-world": "hello-world.html"
  }
}

Build it:

npx ladrillos-build

Your publishable package is now in dist/, including JavaScript, types, and component metadata. It has no Ladrillos runtime dependency.

To try that output locally, replace the entire script block in index.html with this line (don't load both versions of the same component):

<script type="module" src="./dist/hello-world.js"></script>

Run npx serve . -l 3000 again and reload. The same greeting now runs without Ladrillos. Stop the server when you're ready to publish.

3. Publish Your Component as a Beta

Run from hello-ladrillos. Sign in with an npm account that can publish to the scope you chose; complete any authentication prompts in your terminal/browser.

npm login
cd dist
npm pack --dry-run
npm publish --tag beta --access public
cd ..

Always include --tag beta. The version suffix alone does not keep npm from updating latest. Publish dist/, not the author project's root directory.

4. Try Your Published Beta

In a Vite or other bundler-based app:

npm install @YOUR_NPM_USERNAME/hello-world@beta

import "@YOUR_NPM_USERNAME/hello-world/hello-world";

<hello-world name="npm"></hello-world>

Or test in your existing index.html: replace its local script with this CDN URL after publishing. No install or consumer build is needed:

<script type="module"
  src="https://cdn.jsdelivr.net/npm/@YOUR_NPM_USERNAME/[email protected]/hello-world.js"></script>

CDN availability may lag briefly after publishing. For the next release, change the version in ladrillos.build.json to 0.1.0-beta.2, rebuild, and publish dist/ with --tag beta again. npm versions cannot be reused.

Publish the Builder Beta (Maintainers)

This publishes the author tool, not your Hello World component. From the LadrillosJS repository root, with npm publish permission for @ladrillosjs:

cd packages/build
npm ci
npm run typecheck
npm version 0.1.0-beta.1 --no-git-tag-version
npm pack --dry-run
npm login
npm publish --tag beta --access public
npm view @ladrillosjs/build dist-tags

Packaging builds the TypeScript sources automatically. Confirm that beta points to 0.1.0-beta.1. Choose an unused version if that version already exists. For another beta, run npm version prerelease --preid=beta --no-git-tag-version in packages/build, then repeat the dry run and publish command.

This builder is experimental and supports a subset of Ladrillos. For supported features, limitations, and API details, see the standalone publishing guide.

Published

Vulnerabilities

Links

Maintainers

Keywords