Lib.rs

› Web编程
#html #component #low-memory #web #streaming #bundler #css

bin+lib wesc

我们是卓越的组件！

由 Wesley Luyten

4个版本

0.2.1 2024年3月23日
0.2.0 2024年3月23日
0.1.1 2024年3月17日
0.1.0 2024年3月17日

#1368 in Web编程

MIT 许可证

43KB
939 行

WeSC

我们是卓越的组件！

使用lol-html解析器编写的Rust流式Web组件打包器。

想法是创建一个单文件HTML组件格式和构建器，它可以快速构建HTML结果（流式传输，低内存使用）且不依赖于服务器语言。

待办事项：顶级脚本和样式标签中的JS（和CSS）将单独打包，并可以输出为JS和CSS文件。

功能

  • 流式HTML打包器
  • Web组件定义
  • 默认和命名的插槽以及回退内容
  • 声明式Shadow DOM
  • CSS打包
  • JS打包

示例

wesc ./index.html

语法

index.html

<!doctype html>
<html>
  <head>
    <link rel="definition" name="w-card" href="./components/card.html">
  </head>
  <body>
    <w-card>
      <h3 slot="title">Title</h3>
      Description
    </w-card>
  </body>
</html>

components/card.html

<template>
<!-- or <template shadowrootmode="open"> -->
  <style>
    @scope {
      h3 {
        color: red;
      }
    }
  </style>
  <div>
    <h3><slot name="title">Add a slotted title</slot></h3>
    <p><slot>Add default slotted content</slot></p>
  </div>
</template>

<!-- TODO: bundle to a global styles.css -->
<style>
  w-card {
    display: block;
  }
</style>

<!-- TODO: bundle to a global scripts.js -->
<script>
  class WCard extends HTMLElement {
    connectedCallback() {
      console.log('w-card connected');
    }
  }
  customElements.define('w-card', WCard);
</script>

依赖项

~9MB
~223K SLoC