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

`javascript
import * as core from "https://cdn.skypack.dev/@startinblox/core@0.17";

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

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

Component creation with resource

`javascript
import * as core from "https://cdn.skypack.dev/@startinblox/core@0.17";

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

,
this.element
);
},
});
``