solid-needle

based on https://www.figma.com/file/67jvvnTwMEBkMzKhyuQUpX/Needle%2FPrototype

Other

User of prettier before commit !

npx prettier --write .

Component creation without related data

import * as core from "https://cdn.skypack.dev/@startinblox/[email protected]";

core.Sib.register({
  name: "solid-component",
  attributes: {
    dataAttribute: {
      // Attribute passed as `data-attribute=""`
      type: String,
      default: null,
    },
  },
  initialState: {
    // Initiale state of component
    state: null,
  },
  created() {
    // DOM component added
  },
  attached() {
    // Attributes attached
    core.render(
      // Use lit html template https://lit.dev/docs/v1/lit-html/introduction/
      core.html`
        <!-- HTML code here -->
        <div 
          @click=${this.onClick.bind(this)}
          ></div>
    `,
      this.element
    );
  },

  onClick(e) {
    // Click callback
    // console.log("attribute passed", this.dataAttribute);
    // console.log("component state", this.state);
  },
});

Component creation with resource

import * as core from "https://cdn.skypack.dev/@startinblox/[email protected]";

core.Sib.register({
  name: "solid-component",
  use: [core.StoreMixin],
  attributes: {
    dataAttribute: {
      // Attribute passed as `data-attribute=""`
      type: String,
      default: null,
    },
  },
  initialState: {
    // Initiale state of component
    state: null,
  },

  // Triggered when resource fetched from cache or backend
  // Source defined via data-src attribute
  // Resource stored in this.resource
  async populate() {
    if (!this.resource) {
      // Dont forget this as input data source can be invalid
      return;
    }

    core.render(
      core.html`
        <!-- HTML code here -->
    `,
      this.element
    );
  },
});