javascript:preact [ともやん・どっと・ねっと]

この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。

====== Preact ======
<WRAP zoomimg w300 x1_2>
{{:javascript:preact_logo.svg?360}}
</WRAP>

===== ビルドツールを使わない方法 =====
[[https://preactjs.com/guide/v10/getting-started/|はじめに – Preact Guide]]\\

<html>

<div id="editor"></div>
<script type="importmap">
  {
    "imports": {
      "codemirror": "https://esm.sh/codemirror"
      "view": "https://esm.sh/@codemirror/view@^6.36.5",
      "state": "https://esm.sh/@codemirror/state@^6.5.2",
      "commands": "https://esm.sh/@codemirror/commands@^6.8.1",
    }
  }
</script>
<script type="module">
  import {javascript} from 'https://esm.sh/@codemirror/lang-javascript'
  import {basicSetup} from 'https://esm.sh/codemirror'
  import {EditorView, keymap} from 'https://esm.sh/@codemirror/view@^6.36.5'
  import {defaultKeymap} from 'https://esm.sh/@codemirror/commands@^6.8.1'
  //import { solarizedDark } from 'https://esm.sh/cm6-theme-solarized-dark'
  import { monokai } from 'https://esm.sh/@fsegurai/codemirror-theme-monokai'

  let myView = new EditorView({
    doc: `<div id="app"></div>

<script type="module">
  import { h, Component, render } from 'https://esm.sh/preact';

  // アプリケーションを作成する。
  const app = h('h1', null, 'Hello World!');

  render(app, document.getElementById('app'));
</scr`+`ipt>`,
    extensions: [keymap.of(defaultKeymap)],
    parent: document.getElementById('editor'),
    extensions: [
      basicSetup,
      javascript({typescript: true}),
      monokai,
    ]
  })
</script>

<div id="app"></div>
<script type="module">
  import { h, Component, render } from 'https://esm.sh/preact';

  // アプリケーションを作成する。
  const app = h('h1', null, 'Hello World!');

  render(app, document.getElementById('app'));
</script>

</html>

===== 参考文献 =====
[[https://codemirror.net/examples/basic/|Basic Editor Example - CodeMirror]]\\