1const attributes = {
2  exampleProp: 'example-prop',
3};
4
5export default class MyComponent extends HTMLElement {
6  static get observedAttributes() {
7    return Object.values(attributes);
8  }
9
10  constructor() {
11    super();
12
13    const exampleProp = this.getAttribute(attributes.exampleProp);
14    if (exampleProp) {
15      this.#rootElement.classList.add(...exampleProp.split(' '));
16    }
17  }
18
19  connectedCallback() {
20    this.updateName(this.getAttribute(attributes.exampleProp));
21  }
22
23  attributeChangedCallback(exampleProp, oldValue, newValue) {
24    if (exampleProp === attributes.exampleProp) {
25      this.updateName(newValue, oldValue);
26    }
27  }
28
29  updateName(newValue, oldValue) {
30    // do something with exampleProp
31  }
32}

1export default class MyComponent extends HTMLElement {
2  connectedCallback() {
3    const myChild = this.getElement('sjwc-icon');
4    myChild.setAttribute('name', 'fa fa-beer');
5  }
6}

1import { defineComponent } from '@tybalt/core'
2
3defineComponent({
4  name: 'sjwc-example-component'
5})

1import { defineComponent } from '@tybalt/core'
2
3defineComponent({
4  name: 'sjwc-example-component',
5  shadowMode: 'open'
6})

1import { defineComponent } from '@tybalt/core'
2
3defineComponent({
4  name: 'sjwc-example-component',
5  template: '<div>I am static content</div>'
6})

1import { defineComponent } from '@tybalt/core'
2import { string } from '@tybalt/validator'
3
4defineComponent({
5  name: 'sjwc-example-component',
6  props: {
7    name: {
8      validator: string(),
9      default: 'World'
10    }
11  }
12})

1import { defineComponent, html } from '@tybalt/core'
2
3defineComponent({
4  name: 'sjwc-example-component',
5  render() {
6    return html`<div>Hello World!</div>`
7  }
8})

1import { defineComponent, html } from '@tybalt/core'
2
3defineComponent({
4  name: 'sjwc-example-component',
5  setup() {
6    return {
7      myRenderProp: 'foo bar baz quux'
8    }
9  }
10})

1import { defineComponent } from '@tybalt/core'
2
3defineComponent({
4  name: 'sjwc-example-component',
5  css: `
6    .my-class {
7      font-family: Papyrus;
8    }
9  `
10})

1import { defineComponent } from '@tybalt/core'
2import { compose, required, string } from '@tybalt/validator'
3
4const getGreetingFromName = (localName) => {
5  const currentHour = (new Date()).getHours();
6  
7  if (currentHour > 18) {
8    return `Good evening ${localName}`;
9  } else if (currentHour > 12) {
10    return `Good afternoon ${localName}`;
11  } else {
12    return `Good morning ${localName}`;
13  }
14}
15
16defineComponent({
17  name: 'sjwc-hello-sayer',
18  shadowMode: 'open',
19  props: {
20    name: {
21      validator: compose(string(), required()),
22      default: 'World'
23    }
24  },
25  setup({ name }) {
26    return {
27      greeting: name.pipe(map(getGreetingFromName))
28    }
29  },
30  css: `
31    .sjwc-greeting-wrapper {
32      color: rebeccapurple;
33    }
34  `,
35  render({ greeting }) {
36    return html`<div class="sjwc-greeting-wrapper">${greeting}</div>`
37  }
38})

1import { defineComponent, html } from '@tybalt/core'
2
3defineComponent({
4    name: 't-switch-example',
5    props: { condition: {} },
6    render({ condition }) {
7        return html`
8            <t-switch value="${condition}">
9                <div slot="foo">do something foo-ish</div>
10                <div slot="bar">a bar thing happens here</div>
11                <div slot="baz">baz it up</div>
12            </t-switch>
13        `;
14    }
15});

1import { withLevel, withMessage, required } from '@tybalt/validator'
2
3defineComponent({
4  props: {
5    myExample: withMessage(withLevel(required, 'warning'), "the prop myExample is encouraged, but not required")
6  }
7})

1import { compose, string, required } from '@tybalt/validator'
2
3defineComponent({
4  props: {
5    myExample: compose(required(), string())
6  }
7})

1import { mount } from '@tybalt/test-utils'
2
3it('mounts', async () => {
4  const wrapper = mount(MyComponent)
5
6  expect(wrapper.exists()).toBeTruthy()
7})

1import { mount } from '@tybalt/test-utils';
2
3it('should render a primary button by default', async () => {
4    const wrapper = await mount(Button);
5
6    const button = wrapper.find('button');
7
8    expect(button.classes('button-primary')).toBeTruthy();
9});

1import { mount } from '@tybalt/test-utils';
2
3it('renders a link', async () => {
4    const mockHref = 'http://www.example.com';
5    const wrapper = await mount(MyComponent, { attributes: { href: mockHref } });
6
7    const actual = wrapper.find('a');
8
9    expect(actual.attributes('href')).toBe(mockHref);
10});