Introducció

WebC és eina per serialitzar elements personalitzats en temps de creació. Agrega CSS i JavaScript a nivell de components, la qual cosa permet als desenvolupadors mantenir els seus estils i scripts juntament amb l'etiquetatge com a components d'un fitxer únic, de la manera que esteu acostumats si treballeu amb frameworks JavaScript com Svelte o Vue.

Crea un projecte webc amb el fitxer node.sh tal com pots veure en el porjecte https://gitlab.com/xtec/webc

Inicia el projecte:

$ ./node.sh npm init -y
$ ./node.sh npm install @11ty/webc

WebC in a nutshell

En primer lloc: els components WebC són només HTML. Si ja saps com escriure HTML, CSS i JavaScript, ja estàs preparat per començar a treballar amb WebC.

Definim el nostre primer component: un peu de pàgina per al nostre lloc. Crearem un fitxer anomenat site-footer.webc i poseu-hi el següent HTML:

<!-- site-footer.webc -->
<footer>
  <p>&copy; 2022 Yours Truly</p>
</footer>

Ara podem utilitzar a <site-footer></site-footer> element personalitzat i WebC substituirà aquest element amb el marcatge de site-footer.webc.

Així que si tenim un fitxer... page.webc — amb tota la nostra placa HTML, inserim el nostre peu de pàgina en aquest fitxer utilitzant aquest element personalitzat.

<!-- page.webc -->
<!doctype html>
<html>
  <head></head>
  <body>
    <site-footer></site-footer>
  </body>
</html>

Quan processem page.webc,

$ ./node.sh node index.js

l'HTML resultant tindrà aquest aspecte (amb més o menys espais en blanc):

<!doctype html>

© 2022 Yours Truly

Components d'arxiu únic

En aquest punt, encara no està clar quins avantatges obtenim mitjançant l'ús de WebC respecte Liquid o Nunjucks que permeten importar parcials d'altres arxius com aquest.

Però el que WebC pot afegir fins i tot a aquest cas d'ús bàsic és l'experiència d'autoria de components d'arxiu únic (SFC).

Un SFC és un arxiu que conté HTML, CSS i JavaScript que defineix el component.

Sovint segueixen aquesta estructura:

<script></script>

<!-- Markup here -->

<style></style>

Tornant a la nostra site-footer.webc, podem col·locar els estils per al nostre footer amb el marcatge.

<!-- site-footer.webc -->
<footer>
  <p>&copy; 2022 Yours Truly</p>
</footer>

<style>
  footer {
    padding-block: 3rem;
    padding-inline: 1rem;
  }

  footer > p {
    font-family: fantasy;
  }
</style>

Un avantatge per escriure els teus components d'aquesta manera en lloc de tenir el teu marcatge i estils en arxius separats és que quan estàs fent canvis, és més fàcil recordar actualitzar els estils. Si introduïm un

al nostre peu per embolicar el paràgraf a una certa amplada màxima, la nostra (admissiblement contrivada)footer > pEl selector ja no s'aplicarà a l'avís de copyright en el peu de peu. Poder veure el marcatge i els estils just al costat de l'altre ens ajuda a mantenir-los sincronitzats.

Eleventy

WebC components are just HTML.

$ npm install @11ty/eleventy-plugin-webc

To add support for .webc files in Eleventy, add the plugin in your Eleventy configuration file:

const pluginWebc = require("@11ty/eleventy-plugin-webc");

module.exports = function (eleventyConfig) {
	eleventyConfig.addPlugin(pluginWebc);
};

Syntax highlighting

Because WebC is HTML you can configure your editor to treat .webc files as HTML, this should correctly syntax highlight your WebC files. Your editor of choice should have some documentation on how to get this working.

Referències