Not Providing Milkshakes

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

    0.0.3 • Public • Published

    tomponent

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

    Setup

    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!

    API

    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:

    rerender()

    A function that rerenders the component.

    once(func)

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

    props

    An object with the props of the component.

    children

    An array with the children of the component.

    use([plugin])

    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.

    css

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

    css`
      color: blue;
      background-color: red;
    `

    converts a css string to the understood object type.

    Plugins

    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().

    state

    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.
    state.foo = 0;

    globalState

    coming soon

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

    events

    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) => {
      console.log(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 plugin.data.
    • 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 plugin.name.

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

    Install

    npm i tomponent

    DownloadsWeekly Downloads

    0

    Version

    0.0.3

    License

    MIT

    Unpacked Size

    24.6 kB

    Total Files

    5

    Last publish

    Collaborators

    • tomblcode