astro-web-components-svelte

v0.0.1

Published

4 years ago

Astro Web Components Wrapped for Svelte

0High
0Medium
0Low

nicdominguez

THIS IS THE TEST PACKAGE FOR USING ASTRO IN SVELTE

Installation

Quick Start

To get up and running quickly, Astro web components are available via a CDN. Add the following to your <head>

<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400&family=Roboto:wght@200;300;400;500;600;800&display=swap" rel="stylesheet"/>
<link rel="stylesheet" href="https://unpkg.com/@astrouxds/astro-web-components/dist/astro-web-components/astro-web-components.css"/>
<script type="module" src="https://unpkg.com/@astrouxds/astro-web-components/dist/astro-web-components/astro-web-components.esm.js"></script>

Astro components are now available anywhere in your app.

<body>
    <rux-button>Hello World</rux-button>
</body>

Integrations

Install npm i @astrouxds/astro-web-components
Import Astro's Fonts

<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400&family=Roboto:wght@200;300;400;500;600;800&display=swap" rel="stylesheet"/>

Roboto is used for the font. We recommend using Google's CDN; however, you can also pull down and serve your own copy of the font.

Bootstrap Your Application

Static HTML (w/ ESM Modules)

// Import Astro's base styles
<link rel="stylesheet" href="/node_modules/@astrouxds/astro-web-components/dist/astro-web-components/astro-web-components.css"/>
<script type="module">
    import { defineCustomElements } from '/node_modules/astro-web-components/loader'
    defineCustomElements()
</script>

Generic Framework

// Import Astro's base styles
import 'astro-web-components/dist/astro-web-components/astro-web-components.css'
import {
    applyPolyfills,
    defineCustomElements,
} from 'astro-web-components/loader'

applyPolyfills().then(() => {
    defineCustomElements()
})

Vue

import Vue from 'vue'
import App from './App.vue'

// Import Astro's base styles
import '@astrouxds/astro-web-components/dist/astro-web-components/astro-web-components.css'
import {
    applyPolyfills,
    defineCustomElements,
} from '@astrouxds/astro-web-components/loader'

Vue.config.productionTip = false

// Tell Vue to ignore all components defined in the astro-web-components package
Vue.config.ignoredElements = [/rux-\w*/]

// Bind the custom elements to the window object
applyPolyfills().then(() => {
    defineCustomElements()
})

new Vue({
    render: (h) => h(App),
}).$mount('#app')

Angular

Include CUSTOM_ELEMENTS_SCHEMA in any module that uses an Astro component.

import { BrowserModule } from '@angular/platform-browser'
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'
import { FormsModule } from '@angular/forms'

import { AppComponent } from './app.component'

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, FormsModule],
    bootstrap: [AppComponent],
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}

Define your Custom Elements in main.ts

import { enableProdMode } from '@angular/core'
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'

import { AppModule } from './app/app.module'
import { environment } from './environments/environment'

// Note: loader import location set using "esmLoaderPath" within the output target config
import { defineCustomElements } from '@astrouxds/astro-web-components/loader'

if (environment.production) {
    enableProdMode()
}

platformBrowserDynamic()
    .bootstrapModule(AppModule)
    .catch((err) => console.log(err))
defineCustomElements()

Setting dynamic data in for loop

<rux-classification-marking *ngFor="let type of types" [attr.classification]="type"></rux-classification-marking>

React

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
import registerServiceWorker from './registerServiceWorker'

import {
    applyPolyfills,
    defineCustomElements,
} from '@astrouxds/astro-web-components/loader'

ReactDOM.render(<App />, document.getElementById('root'))
registerServiceWorker()

applyPolyfills().then(() => {
    defineCustomElements()
})

Tree Shaking + Bundlers

Astro ships with a convenient lazy-loader, but if you'd rather more control over your build process and are using an existing bundler that supports tree shaking, you can also cherry-pick only the components you actually use. For example:

import { RuxClock } from '@astrouxds/astro-web-components/dist/components/rux-clock.js'
customElements.define('rux-clock', RuxClock)

NOTE: You will need to manually call customElements.define for every component you wish to use and their dependencies. Refer to each component's documentation to see their dependencies at a glance.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme