2.0.0-beta.24 • Published 5 months ago

@aurelia/web-components v2.0.0-beta.24

Weekly downloads
-
License
MIT
Repository
github
Last release
5 months ago

License: MIT TypeScript CircleCI npm

@aurelia/web-components

Installing

For the latest stable version:

npm i @aurelia/web-components

For our nightly builds:

npm i @aurelia/addons@web-components

Usage

Here is an example configuration for webcomponents.js to show how to register aurelia custom elements into web components:

import { WcCustomElementRegistry } from '@aurelia/web-components'; 
import { DI, Registration  } from '@aurelia/kernel';
import { StandardConfiguration, IPlatform } from '@aurelia/runtime-html';
import {BrowserPlatform} from '@aurelia/platform-browser'

// Create the Aurelia container
const container = DI.createContainer();
// Register the platform
container.register(
  Registration.instance(IPlatform, BrowserPlatform.getOrCreate(globalThis)));
// Register the StandardConfiguration
container.register(StandardConfiguration); // This registers core services like IExpressionParser
const registry = container.get(WcCustomElementRegistry);

// Import custom component classes
import { HelloName} from './components/hello-name';
// Register web component name with it's view model implementation
registry.define('my-hello-name', HelloName);

An example vite.webcomponents.config:

export default defineConfig({
  ...
  
  build: {
    lib: {
      entry: './src/webcomponents.js', // Entry point for the web components
      name: 'MyComponents', // Global name for the library
      fileName: (format) => `my-components.${format}.js`, // Output file name
    },
    rollupOptions: {
      external: [], // Add external dependencies here if needed
      output: {
        globals: {}, // Define global variables for external libraries if any
      },
    },
    outDir: './dist-webcomponents', // Output directory for the web components
  },
  ...
});

You may also add separate buildwc task for building web components inside package.json:

...
"scripts": {
    ...
    "buildwc": "vite build --config vite.webcomponents.config.js",
    ...
  },
...

Then you may build web components using npm run buildwc and copy e.g. the resulting dist/my-components.es.js and style style.css into your desired location and use '' web component in index.html:

<html>
  <head>
  ...
    <script src="my-components.es.js" type="module"></script>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>    
  ...
  <my-hello-name></my-hello-name>
  ...
  </body>
</html>
2.0.0-beta.24

5 months ago

2.0.0-beta.23

8 months ago

2.0.0-beta.22

1 year ago

2.0.0-beta.21

1 year ago

2.0.0-beta.20

1 year ago

2.0.0-beta.19

1 year ago

2.0.0-beta.18

1 year ago

2.0.0-beta.17

1 year ago

2.0.0-beta.16

1 year ago

2.0.0-beta.15

1 year ago

2.0.0-beta.14

2 years ago

2.0.0-beta.13

2 years ago

2.0.0-beta.12

2 years ago

2.0.0-beta.11

2 years ago

2.0.0-beta.10

2 years ago

2.0.0-beta.9

2 years ago

2.0.0-beta.8

2 years ago

2.0.0-beta.7

2 years ago

2.0.0-beta.6

2 years ago

2.0.0-beta.5

2 years ago

2.0.0-beta.4

2 years ago

2.0.0-beta.2

3 years ago

2.0.0-beta.3

3 years ago

2.0.0-beta.1

3 years ago

0.7.0

5 years ago