teddytags
    TypeScript icon, indicating that this package has built-in type declarations

    2.1.0 • Public • Published

    Teddytags logo

    The superfast way to custom elements.

    Name the HTML tags your own.

    • Out-of-box custom elements (<myElement />)
    new Tag({
      name: "myElement",
      to: "p",
    });

    <myElement>Hello</myElement>

    <p>Hello</p>
    • Virtual Components (Like those of React)
    • custom elements + Virtual components directly in HTML
    /** @jsx teddy.h */
    import teddy from "teddytags";
    class MyComponent extends teddy.Component {
      constructor(props) {
        super(props);
      }
      render() {
        return <h1>Hello, {this.props.name}</h1>;
      }
    }
    • Bind virtual components to the DOM
    import { Tag } from "teddytags";
    //MyComponent is defined in above example
    new Tag({
      name: "MyComponent",
      to: MyComponent,
    });

    and use it.

    <MyComponent name="myself" />

    <div name="myself" data-component="MyComponent">
      <h1>Hello, myself</h1>
    </div>
    • Superb and extra-simple diff algorithm
    • Stateful Class Components
    • 3kB min-zipped in browser
    • TypeScript and TSX support built-in
    • Custom Elements Registry (window.TagRegistry)
      window.TagRegistry.getEntry("myComponent")
      // => { from: class MyComponent..., nodes: Array<HTMLElement> }

    Why does the project exist in the first place??

    Because custom elements need to be much more powerful than they are now. So a little library like this can make a difference.

    Documentation

    Head over to https://teddy.js.org/docs

    Try it out

    Browser

    You don't need ES6 to run TeddyTags... https://git.io/teddytags-es5

    <!-- UMD -->
    <script src="https://unpkg.com/teddytags@latest/lib/teddytags.umd.js"></script>
    <!-- ESM -->
    <script type="module">
      import * as TeddyTags from "https://unpkg.com/teddytags@latest/lib/teddytags.js";
    </script> 

    NPM

    > npm i teddytags
    > yarn add teddytags

    Insights

    Build Status Coverage Status

    npm

    gzip size

    brotli size

    Browser Matrix

    Install

    npm i teddytags

    DownloadsWeekly Downloads

    5

    Version

    2.1.0

    License

    MIT

    Unpacked Size

    380 kB

    Total Files

    8

    Last publish

    Collaborators

    • obnoxiousnerd