Not Providing Milkshakes

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

    0.0.3 • Public • Published


    An experimental, simple and modular component library leveraging new technologies like shadow DOM and web components.


    1. Insert import * as t from "tomponent" to the top of your bundled js file.
    2. If using babel, add this to your .babelrc:
    "plugins": {
      ["@babel/plugin-transform-react-jsx", {
        "pragma": "t.createElement"

    Or if using TypeScript, add this to your tsconfig.json

    "jsx": "react",
    "jsxFactory": "t.createElement"
    1. Done!


    Component(name, data => <element />)

    Note: component names follow a strict set of rules, so the creation of elements as well as JSX usage are automatically fixed, but usage from the DOM may not work 100% as expected

    The component function returns a HTML element, typically created with JSX, and takes a data object that is extendible by plugins, but contains the following by default:


    A function that rerenders the component.


    A function that takes a function to call on first render of the component.


    An object with the props of the component.


    An array with the children of the component.


    Use is a function which takes a plugin, and applies it.

    If not passed a plugin, it applies all the built-in plugins.

    See creating a plugin, or the built-in plugins below.


    The JSX normally takes a like object and applies it to the element, but the tagged template literal

      color: blue;
      background-color: red;

    converts a css string to the understood object type.


    Default Plugins

    These are availible on the t.plugins object can can either be used individualy with t.use(t.plugins.NAME) or they can all be loaded at once with t.use().


    This plugin adds a state object to the data object passed to the component function, which contains a set function and a get function.

    data.state.set(storename, {/* new state data */});
    const state = data.state.get(storename, {/* default value */}); // this optionally takes a boolean for whether or not changing this rerenders the element
    // This returns an editable object of the state where items in the object can be replaced, but the object itself cannot be, requiring the usage of the set function. = 0;


    coming soon

    Will have same api as state, but global for all objects.


    This plugin allows you to subscribe to events on your main dom element. It also has an optional special parameter used for KeyboardEvents and MouseEvents used for the keyboard key and mouse button respectively. The first parameter is the event name, and the last is the function called when the event is fired.

    data.on("click", (e) => {
    data.on("keydown", "Backspace", (e) => {
      console.log("Backspace key pressed.");

    Writing a plugin

    A plugin is just an object that contains the following properties:

    • name: A string used for
    • oncreate (optional): A function called with the element data passed, called on usage of every element.
    • onrender (optional): A function passed the return value of the rendered element, that can optionally return a new version the rendered elements to replace them.
    • data (optional): A function that returns an item to be attatched to the data object, passed to every component, named

    If written in TypeScript, the plugin should be of the exported type IPlugin.


    npm i tomponent

    DownloadsWeekly Downloads






    Unpacked Size

    24.6 kB

    Total Files


    Last publish


    • tomblcode