bay.js
1.0.0
O Bay.js é uma biblioteca de front-end projetada para facilitar a criação de componentes da Web reutilizáveis, bem como adicionar estado e interatividade ao HTML. Para vê -lo em ação, você pode visitar o bayjs.org e explorar seus exemplos.
<template> no DOM como uma fonte de modelo.Bay.js pode ser usado através de uma tag de script ou importação como um módulo.
< script src =" //cdn.jsdelivr.net/npm/@dunks1980/bay.js/bay.min.js " > </ script >Exemplo de tag de script
< script type =" module " src =" main.js " > </ script > // In main.js
import bay from '//cdn.jsdelivr.net/npm/@dunks1980/bay.js/bay.min.mjs' ;
bay ( ) ; Você pode adicionar um número de versão como esse para evitar alterações de quebra: '//cdn.jsdelivr.net/npm/@dunks1980/bay.js@ <versão> /bay.min.mjs' O número da versão é opcional e pode ser adquirido da página NPM. Ou se estiver usando node_modules: './node_modules/@dunks1980/bay.js/bay.min.mjs';
Exemplo de módulo ES
npm i @ dunks1980 / bay . js
import bay from '@dunks1980/bay.js' ;
bay ( ) ;Exemplo de NPM
import bay from ...
bay ( {
text : `<h1 :style="margin: 1rem;">Settings</h1>` ,
} ) ; < template id =" my-template " >
%{text} <!-- becomes: --> < h1 :style =" margin: 1rem; " > Settings </ h1 >
</ template >
< my-component bay =" #my-template " message =" Hello world! " > </ my-component > As configurações só podem ser definidas com módulos ES ou NPM, devem ser strings e só podem ser definidas uma vez antes de criar componentes. As variáveis de configurações podem ser usadas em qualquer lugar dentro dos modelos.
Exemplo de configurações
Existem algumas maneiras de definir um componente em Bay.js:
Em seu HTML, crie um modelo em linha e aplique o atributo bay e quaisquer outros adereços:
< template bay =" my-component-name " message >
< h1 > ${this.message} </ h1 >
</ template >
< my-component-name message =" Hello world! " > </ my-component-name > Em seu html, crie um modelo em linha e suprimentos bay.js o ID dos modelos:
< template id =" my-template " >
< h1 > ${this.message} </ h1 >
</ template >
< my-component bay =" #my-template " message =" Hello world! " > </ my-component > Crie um arquivo e forneça Bay.js o URL (não envolva o conteúdo do arquivo no modelo). A extensão do arquivo pode ser o que você quiser, desde que seu conteúdo esteja no formato HTML:
< my-component bay =" /url/to/my/components.html " message =" Hello world! " > </ my-component >
<!-- or -->
< my-component bay =" /url/to/my/components.php " message =" Hello world! " > </ my-component > <!-- in component file -->
< h1 > ${this.message} </ h1 > Passa bay.js o modelo importado:
import my_component from "./../component_imports/my_component.html?raw" ;
import bay from "@dunks1980/bay.js" ;
bay ( ) ;
bay . create ( "my-component" , my_component , [ "message" ] ) ; Ou crie modelo e passe: ($ e `dentro da string precisarão de escapar se a string literal)
import bay from "@dunks1980/bay.js" ;
bay ( ) ;
bay . create ( "my-component" , `<h1>${this.message}</h1>` , [ "message" ] ) ; <!-- Anywhere in the HTML including other components -->
< my-component message =" Hello world! " > </ my-component > No seu HTML, crie um elemento embutido com um modelo dentro e adicione a baía-hidrato ao elemento contendo:
< div bay-hydrate >
< h1 > This will be replaced once bay creates the component. </ h1 >
< template >
< h1 > ${this.message} </ h1 >
< script > this . message = 'Hello World!' </ script >
</ template >
</ div > Os adereços não estarão disponíveis usando esse método, mas você pode usar as configurações. O conteúdo é renderizado ao DOM principal, para que os estilos não sejam encapsulados e as tags <style> definidas no modelo não terão efeito.
No seu html, crie um elemento embutido com um modelo dentro e adicione bay = "dsd" ao elemento e Shadowrootmode = "Abrir" ao elemento do modelo:
< my-component bay =" dsd " >
< template shadowrootmode =" open " >
< dsd >
< h1 id =" title " > loading... </ h1 >
</ dsd >
< noscript >
< h1 id =" title " > ${this.header_text} </ h1 >
</ noscript >
< script mounted >
this . header_text = "Hello World" ;
</ script >
</ template >
</ my-component > Os elementos serão visíveis enquanto o Bay estiver carregando, mas não se forem embrulhados em tags Noscript. Os elementos DSD e seus filhos serão removidos assim que o componente for criado e os elementos do NOSCRIPT serão removidos, mas seu conteúdo permanecerá e seu conteúdo será analisado e difundido. Os adereços não estarão disponíveis usando esse método, mas você pode usar as configurações. O conteúdo é renderizado ao DOM principal, para que os estilos não sejam encapsulados.
Um componente pode ser usado em qualquer lugar do HTML, mas os modelos em linha devem estar no corpo do documento. "meu componente" pode ser o que você quiser, mas deve ter um traço no nome de acordo com a especificação do elemento personalizado.
| Sintaxe | Descrição | Exemplo |
|---|---|---|
<if this="this.xxx">...</if> | Se a instrução, renderiza apenas o conteúdo entre as tags <if> se esse atributo é verdadeiro. | Condicionais |
<else-if this="this.xxx">...</else-if> | Caso contrário, se, renderiza apenas o conteúdo entre as tags <else-if> se esse atributo é verdadeiro e anterior <if> <else-if> é falso. | Condicionais |
<else>...</else> | Caso contrário, renderiza apenas o conteúdo entre as tags <else> se todas as tags anteriores <if> <else-if> forem falsas. | Condicionais |
<show this="this.xxx">...</show> | Mostre, quando você precisar manter o código no DOM e alternar sua tela. Adicione duração <show this="this.xxx" duration=".5s"> para um efeito de desbotamento. | Mostrar |
<switch this="this.xxx"> <case this="xxx" break>...</case> <default>...</default> </switch> | Declaração de mudança, para condicionais mais complexos. | Trocar |
<map array="this.arr">...</map> | Mapear, para iterar sobre uma matriz <map params="item, i, array" array="this.arr" join="<hr>"> params e junção são opcionais, os parâmetros padrão são: element, index, array . | Iterações |
<for array="this.arr">...</for> | Foreach loop, para iterar sobre uma matriz <for params="item, i, array" array="this.arr"> params são opcionais, os parâmetros padrão são: element, index, array . | Iterações |
<for this="let i = 0; i < this.arr.length; i++">...</for> | Para loop, para iterar com as condições. | Iterações |
<inner-html>...</inner-html> | Para renderizar para a luz DOM. Se o atributo inner-html estiver presente no componente, ele renderizará dentro desse elemento:<my-comp bay="..." inner-html="#render-target"> . Se o atributo interno-html não estiver presente no componente, você poderá usar um slot para ver o conteúdo interno-html. | Html interno |
<slot name="slot1">...</slot> | Usado para definir um slot conforme componente da web padrão. | Slots |
<route href="/xxx/var">...</route> | A rota cria a rota para a etiqueta do roteador, destina -se a um aplicativo de página única (SPA). | Rota |
<router this="/xxx/:xxx">...</router> | O roteador corresponde ao URL atual :xxx são usados para variáveis. | Rota |
<define this="myEl">...</define> <myEl></myEl> | Defina um bloco de código a ser reutilizado. | Definir |
<include this="https://..."></include> | Inclua código no modelo de um URL. | Incluir |
| Sintaxe | Descrição | Exemplo |
|---|---|---|
this.xxx = 'xxx'; | Atribuindo this.xxx Um valor acionará uma renderização do componente da baía.Para obter/definir esse valor de fora do componente: document.getElementById('my-el').shadowRoot.proxy.xxx = 'xxx'; | Local |
$global = 'xxx'; | A atribuição de $global.xxx A Value acionará a renderização em todos os componentes da baía que contêm $global .Para obter/definir esse valor de fora dos componentes: bay.global.xxx = 'hello'; console.log(bay.global); | Global |
$bay.querySelector('xxx'); | Use $bay para segmentar o sombra DOM. Shadow Dom vs. Light Dom | Variáveis |
$el.querySelector('xxx'); | Use $el para direcionar o DOM leve. Shadow Dom vs. Light Dom | Variáveis |
$parent.xxx = 'xxx'; | A atribuição de $parent.xxx um valor atualizará this.xxx no pai se o pai for outro componente da baía e o inturn desencadeia uma renderização. | Pai |
$details.changed;$details.element; | Detalhes do atributo Slotchange Script sobre o que mudou. | Slots |
$route | Detalhes do local da janela. | Roteador |
$path | : variáveis do caminho de pesquisa :xxx/:xxx . | Roteador |
| Sintaxe | Descrição | Exemplo |
|---|---|---|
bay="#my-template"bay="/my-template.html"bay="dsd" | Quando definido na tag <custom-element bay="..."> será o modelo a ser usado, pode ser um ID de modelos ou um caminho para um arquivo, o DSD é experimental. | Usando id Usando arquivo Dsd |
bay="my-template-name" | Quando definido em um <template bay="custom-element"> será o nome da tag <custom-element> . | Usando o nome |
fouc | Usado para ocultar o DOM da luz dentro do componente até que esteja totalmente carregado. | Fouc |
inner-html="#render-target" | Usado para informar o componente onde ele deve renderizar <inner-html>...</inner-html> conteúdo. | Html interno |
xxx="value" | Quaisquer outros atributos são transmitidos para o componente e se tornam adereços que podem ser acessados por this.xxx , xxx sendo o nome do atributo. | Adereços |
| Sintaxe | Descrição | Exemplo |
|---|---|---|
:style="color: red; display: ${this.display}" | Aplique estilos de dados inlinados. | Estilos |
:click="console.log('clicked')" | Qualquer evento JavaScript que começa com ON (OnClick neste exemplo) apenas substitua por: ( oninput="xxx" -> :input="xxx" ). | Eventos |
:my-event="console.log('my custom event')" | Escute qualquer evento personalizado e aciona o código quando detectar esse evento foi acionado de qualquer lugar. | Evento personalizado |
bind="this.xxx" | Usado para ligação de dados bidirecional em <inputs> , <selects> e <textareas> . | Vincular |
slot="slot-name" | Usado para definir um slot conforme componente da web padrão. | Slots |
ref="xxx" | $ref('xxx').onclick = (e) => {...Veja as funções internas abaixo para uso. | Ref |
this-attribute="xxx" | Substituirá this-attribute = "xxx" pelo que retornou do seu valor de atributo. | Este atributo |
:click.prevent="xxx" | Modificadores de eventos .Passive, .Capture, .Once, .Stop, .Prent,. | Modificadores de eventos |
| Sintaxe | Descrição | Exemplo |
|---|---|---|
<script imports>...</script> | Defina scripts de importação do módulo. | Importações |
<script mounted>...</script> | O script é executado após a montagem do modelo. | Montado |
<script props>...</script> | O script que é executado quando os adereços mudam. | Adereços |
<script render>...</script> | Script que torna seu valor de retorno em vigor. | Renderizar |
<script slotchange>...</script> | O script que é executado no conteúdo do slot muda. | Mudança de slot |
<script update>...</script> | O script executado em todas as atualizações. | Atualizar |
| Sintaxe | Descrição | Exemplo |
|---|---|---|
bay(); | Usado para inicializar o Bay.js se módulo importado. | Instalação |
bay.create('component-name', '<h1>test</h1>', ["prop-1", "prop-2"]); | Crie um componente. | Criar |
bay.refresh(); | Refresh Bay depois que um novo elemento personalizado é aplicado dinamicamente ao DOM. | Atualizar |
| Sintaxe | Descrição | Exemplo |
|---|---|---|
$bay.encode('string'); | Codificar/escapar de uma string. | Codificar |
$bay.decode('string'); | Decodificar/descer uma string. | Decodificar |
$bay.emit('custom-event', {key: value}); | Emite um evento personalizado. (em todos os componentes) | Emitir |
$bay.on('custom-event', (e) => {console.log(e.detail);}); | Ouça um evento personalizado. (em todos os componentes) | Emitir |
$ref('xxx').onclick = (e) => {...$ref('xxx').forEach((el) => {... | Obtém elementos com o atributo ref = "xxx". Só pode ser usado no script montado. | Ref |
