Skip to content

Home

Jump to bottom
Jong Won Kim edited this page Nov 10, 2025 · 8 revisions

@nuka9510/simple-custom-element - Wiki

  • simple custom element util for web front-end

Install

npm i @nuka9510/simple-custom-element
<script src="https://cdn.jsdelivr.net/npm/@nuka9510/simple-custom-element/dist/js/index.min.js"> </script>
<script src="https://cdn.jsdelivr.net/npm/@nuka9510/simple-custom-element/dist/js/plugin/index.min.js"> </script>
<script src="https://cdn.jsdelivr.net/npm/@nuka9510/simple-custom-element@latest/dist/js/index.min.js"> </script>
<script src="https://cdn.jsdelivr.net/npm/@nuka9510/simple-custom-element@latest/dist/js/plugin/index.min.js"> </script>
<script src="https://cdn.jsdelivr.net/npm/@nuka9510/simple-custom-element@<specific-version>/dist/js/index.min.js"> </script>
<script src="https://cdn.jsdelivr.net/npm/@nuka9510/simple-custom-element@<specific-version>/dist/js/plugin/index.min.js"> </script>
<script type="importmap">
  {
    "imports": {
      "@nuka9510/simple-custom-element": "https://cdn.jsdelivr.net/npm/@nuka9510/simple-custom-element/dist/esm/index.min.mjs",
      "@nuka9510/simple-custom-element/plugin": "https://cdn.jsdelivr.net/npm/@nuka9510/simple-custom-element/dist/esm/plugin/index.min.mjs"
    }
  }
</script>
<script type="importmap">
  {
    "imports": {
      "@nuka9510/simple-custom-element": "https://cdn.jsdelivr.net/npm/@nuka9510/simple-custom-element@latest/dist/esm/index.min.mjs",
      "@nuka9510/simple-custom-element/plugin": "https://cdn.jsdelivr.net/npm/@nuka9510/simple-custom-element@latest/dist/esm/plugin/index.min.mjs"
    }
  }
</script>
<script type="importmap">
  {
    "imports": {
      "@nuka9510/simple-custom-element": "https://cdn.jsdelivr.net/npm/@nuka9510/simple-custom-element@<specific-version>/dist/esm/index.mjs",
      "@nuka9510/simple-custom-element/plugin": "https://cdn.jsdelivr.net/npm/@nuka9510/simple-custom-element@<specific-version>/dist/esm/plugin/index.mjs"
    }
  }
</script>

Usage

  • js
simpleCustomElement.Component;
simpleCustomElementPlugin.UtilAction;
  • mjs
import { Component } from "@nuka9510/simple-custom-element";
import { UtilAction } from "@nuka9510/simple-custom-element/plugin";
  • cjs
const simpleCustomElement = require('@nuka9510/simple-custom-element'),
simpleCustomElementPlugin = require('@nuka9510/simple-custom-element/plugin');

simpleCustomElement.Component;
simpleCustomElementPlugin.UtilAction;

Types

  • @nuka9510/simple-custom-element에서 사용되는 type들의 정의

Interfaces

Classes

Plugins

Example

┌── js
│  ├── component
│  │  └── test-component.mjs
│  ├── register
│  │  └── test-register.mjs
│  └── index.mjs
└── view
   └── index.html
  • js/component/test-component.mjs
import { Util } from "@nuka9510/js-util";
import { Component, Interceptor } from "@nuka9510/simple-custom-element";

export default class TestComponent extends Component {
  get action() {
    return {
      'set-state': [
        { event: 'click', callback: this.onSetStateClick }
      ]
    };
  }

  get css() {
    return `
      table { border-collapse: collapse; }
      :is(th, td) { border: 1px solid #000000; }
      td { text-align: center; }
    `;
  }

  constructor() {
    super();

    Interceptor.append({
      action: ['set-state'],
      preHandle: (ev, target, component) => { console.debug('preHandle: set-state'); },
      postHandle: (ev, target, component) => { console.debug('postHandle: set-state'); }
    });
  }

  async init() {
    this.attachShadow({ mode: 'open' });

    this.state = this.setState({ arg: 'arg1' });
  }

  onSetStateClick(ev, target, component) {
    console.debug('onSetStateClick');
    this.state.set('arg', target.dataset.sceValue);
  }

  render() {
    const state = this.state.get();

    return `
      <table>
        <colgroup>
          <col style="width: 80px;">
          <col style="width: 80px;">
          <col style="width: 80px;">
          <col style="width: 250px;">
          <col style="width: 250px;">
          <col style="width: 250px;">
        </colgroup>
        <thead>
          <tr>
            <th> num </th>
            <th> num * 2 </th>
            <th> num ** 2 </th>
            <th> (num / (num * 2)) * 100 </th>
            <th> (num / (num ** 2)) * 100 </th>
            <th> ((num * 2) / (num ** 2)) * 100 </th>
          </tr>
        </thead>
        <tbody>
          ${
            this[state.arg].list.reduce(
              (...arg) => `
                ${ arg[0] }
                <tr>
                  <td> ${ arg[1].num } </td>
                  <td> ${ arg[1].num * 2 } </td>
                  <td> ${ arg[1].num ** 2 } </td>
                  <td> ${ Util.numberFormat((arg[1].num / (arg[1].num * 2)) * 100, 3) } </td>
                  <td> ${ Util.numberFormat((arg[1].num / (arg[1].num ** 2)) * 100, 3) } </td>
                  <td> ${ Util.numberFormat(((arg[1].num * 2) / (arg[1].num ** 2)) * 100, 3) } </td>
                </tr>
              `, ''
            )
          }
        </tbody>
      </table>
      <button type="button" data-sce-action="set-state" data-sce-value="arg1"> setState(arg1) </button>
      <button type="button" data-sce-action="set-state" data-sce-value="arg2"> setState(arg2) </button>
      <button type="button" data-sce-action="set-state" data-sce-value="arg3"> setState(arg3) </button>
    `;
  }

}
  • js/register/test-register.mjs
import { Register } from "@nuka9510/simple-custom-element";
import TestComponent from "../component/test-component.mjs";

export default class TestResister extends Register {
  get element() {
    return [
      { tagName: 'test-component', element: TestComponent }
    ];
  }

}
  • js/index.mjs
import TestResister from "./register/test-register.mjs";

new TestResister();
  • view/index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <test-component>
    <script type="application/json" data-sce-arg="arg1">
      {
        "list": [
          { "num": 1 },
          { "num": 2 },
          { "num": 3 },
          { "num": 4 },
          { "num": 5 },
          { "num": 6 }
        ]
      }
    </script>
    <script type="application/json" data-sce-arg="arg2">
      {
        "list": [
          { "num": 7 },
          { "num": 8 },
          { "num": 9 },
          { "num": 10 },
          { "num": 11 },
          { "num": 12 }
        ]
      }
    </script>
    <script type="application/json" data-sce-arg="arg3">
      {
        "list": [
          { "num": 13 },
          { "num": 14 },
          { "num": 15 },
          { "num": 16 },
          { "num": 17 },
          { "num": 18 }
        ]
      }
    </script>
  </test-component>
</body>
<script type="importmap">
  {
    "imports": {
      "@nuka9510/js-util": "https://cdn.jsdelivr.net/npm/@nuka9510/js-util/dist/esm/index.min.mjs",
      "@nuka9510/simple-custom-element": "https://cdn.jsdelivr.net/npm/@nuka9510/simple-custom-element/dist/esm/index.min.mjs"
    }
  }
</script>
<script src="../js/index.mjs" type="module"></script>
</html>

Clone this wiki locally