lit-html の素振り #

// index.js
import { html, render } from 'lit-html';

const app = html`<h1>hello world</h1>`;
render(app, document.body);

// これでも問題なし
const app = html`
<div>hello world</div>
<div>hello takurinton</div>
`;

const listener = {
  handleEvent(e) {
    alert('hello world');
  },
};

const buttonComponent = html`<button @click=${listener}>Click Me</button>`

const takurinton = html`<h1>hello takurinton</h1>`;
const hoge = html`<h1>hello hoge</h1>`;

const app = html`
${takurinton}
${hoge}
`;

const name = 'takurinton';
const app = (name) => html`<h1>hello ${name}</h1>`;

const items = ['takurinton', 'hoge', 'fuga'];
const itemsComponent = html`
  <ul>
    ${items.map(item => html`<li><h2>name: ${item}</h2></li>`))}
  </ul>
`;

const isUser = html`
  ${user.isloggedIn ? 
    html`<h1>Welcome ${user.name}</h1>` : 
    html`<h1>Please log in</h1>`
  }
`;

const app = html`<div>hello world</h1>`;
render(app, document.body);

import {repeat} from 'lit-html/directives/repeat.js';

const items = [
    {
        id: 1, 
        name: 'takurinton'
    }, 
    {
        id: 2, 
        name: 'hogehoge'
    }, 
    {
        id: 3, 
        name: 'fugafuga'
    }
];

const itemsComponent = (items) => html`
  <ul>
    ${repeat(items, (item) => item.id, (item, index) => html`
      <li>${index}: ${item.name}</li>
    `)}
  </ul>
`;

${user.isAdmin ? 
    html`<button>DELETE</button>` :
    ''
}

import { nothing } from 'lit-html';

${user.isAdmin ? 
    html`<button>DELETE</button>` :
    nothing
}

// こういうのがあって
html`<slot>Sorry, no content available. I am just fallback content</slot>`;

// ここで実装したい
import {nothing, html} from 'lit-html';
html`
<example-element>
${user.isAdmin? 
    html`<button>DELETE</button>` : 
    nothing
}
</example-element>
`;

// 空白を開けるとそれは fallback 扱い
html`
<example-element> ${nothing} </example-element>
`;

// 改行もまた fallback 扱い
html`
<example-element>
${nothing}
</example-element>
`;

import {cache} from 'lit-html/directives/cache.js';

const Admin = (data) => html`<div>admin: ${data}</div>`; 
const Nomal = (data) => html`<div>user: ${data}</div>`;

html`${cache(data.isAdmin ? 
    Admin(data) : 
    Nomal(data)
)}`

// classMap
import { classMap } from 'lit-html/directives/class-map.js';

const itemTemplate = item => {
  const classes = { selected: item.selected } ;
  return html`<div class="menu-item ${classMap(classes)}">Classy text</div>`;
}

// styleMap
import { styleMap } from 'lit-html/directives/style-map.js';
import { classes } from './style.css.ts';

const myTemplate = () => {
  styles = {
    color: classes.color,
    backgroundColor: highlight ? classes.noon : classes.night,
  };

  return html`
    <div style=${styleMap(styles)}>
      Hi there!
    </div>
  `;
};

const themeColor = 'red';
const element = html`
<style>
:host {
    ... 
} 
.text {
    font-size: 5rem; 
    color: ${themeColor};
}
</style>

<h1 class="text">hello world</h1>
`;

import {html, render} from 'lit-html';

const hello = (name) => html`<h1>Hello ${name}</h1>`;
render(hello('takurinton'), document.body);

// 更新するには同じことをしないといけない。
render(hello('hogerinton'), document.body);

class MyComponent extends HTMLElement {
  // ...

  _update() {
    // イベントリスナーを受け取り MyComponent にバインドすることができる
    render(this._template(), this._renderRoot, {eventContext: this});
  }
}

import { directive } from 'lit-html';
const helloDirective = directive(() => (part) => { part.setValue('Hello')});
const app = html`<div>${helloDirective()}</div>`

render(app, document.body);

// これが directive
const safe = directive((f) => (part) => {
  try {
    part.setValue(f());
  } catch (e) {
    console.error(e);
  }
});

// これが directive
const counter = directive((initialValue) => (part) =>
  part.setValue(part.value === undefined ? initialValue : part.value+1);
);

const template = html`
  <div>
  　<!-- ここで使用する、返す値は動的な DOM -->
    ${counter(0)}
  </div>`;

const resolvePromise = directive((promise) => (part) => {
  part.setValue("hello world");

  Promise.resolve(promise).then((resolvedValue) => {
    part.setValue(resolvedValue);
    // ここでコミットする
    part.commit();
  });
});

const counter = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("resolved.");
  }, 1000);
});

const template = html`<div>${resolvePromise(counter)}</div>`; 

import { directive } from 'lit-html';

const stateMap = new WeakMap();

const statefulDirective = directive(() => (part) => {
  let myState = stateMap.get(part);
  if (myState === undefined) {
    // 初期値
    myState = {};
    stateMap.set(part, myState);

    // ここで更新をする
    // ...
  }
});

class ClearableWeakMap {
  constructor(init) {
    this._wm = new WeakMap(init);
  }
  // これか、新しい WeakMap を作成することで初期化してるのか
  clear() {
    this._wm = new WeakMap();
  }
  delete(k) {
    return this._wm.delete(k);
  }
  get(k) {
    return this._wm.get(k);
  }
  has(k) {
    return this._wm.has(k);
  }
  set(k, v) {
    this._wm.set(k, v);
    return this;
  }
}

import { NodePart } from 'lit-html';
const newPart = new NodePart(containerPart.options);

newPart.appendIntoPart(containerPart);