Merge pull request #4 from tomoemon/tree-shakable

Tree shakable にして余計なコードがバンドルされないようにする

Author: tomoemon

examples/cli/index.js

@@ -1,14 +1,22 @@
 //@ts-check
-import * as emiel from "emiel";
+import {
+  InputEvent,
+  InputStroke,
+  KeyboardState,
+  VirtualKeys,
+  loadPresetKeyboardLayoutQwertyJis,
+  loadPresetRuleRoman,
+} from "emiel";
 
-const automaton = emiel.rule.getRoman().build("かった");
-const Key = emiel.VirtualKeys;
+const layout = loadPresetKeyboardLayoutQwertyJis();
+const automaton = loadPresetRuleRoman(layout).build("かった");
+const Key = VirtualKeys;
 const inputResult = [Key.K, Key.A, Key.F, Key.T, Key.T, Key.A].map((k) => [
   k,
   automaton.input(
-    new emiel.InputEvent(
-      new emiel.InputStroke(k, "keydown"),
-      new emiel.KeyboardState(),
+    new InputEvent(
+      new InputStroke(k, "keydown"),
+      new KeyboardState(),
       new Date()
     )
   ),

examples/react-backspace/src/App.tsx

@@ -1,34 +1,35 @@
+import { activate, detectKeyboardLayout, InputStroke, KeyboardLayout, loadPresetRuleRoman, VirtualKeys } from "emiel";
+import { useEffect, useMemo, useState } from "react";
 import "./App.css";
-import * as emiel from "emiel";
-import { useEffect, useState } from "react";
 import { BackspaceRequirdAutomaton } from "./backspace";
 
 function App() {
-  const [layout, setLayout] = useState<emiel.KeyboardLayout | undefined>();
+  const [layout, setLayout] = useState<KeyboardLayout | undefined>();
   useEffect(() => {
-    emiel.keyboard.detect(window).then(setLayout).catch(console.error);
+    detectKeyboardLayout(window).then(setLayout).catch(console.error);
   }, []);
   return layout ? <Typing layout={layout} /> : <></>;
 }
 
-function Typing(props: { layout: emiel.KeyboardLayout }) {
-  const words = ["おをひく", "こんとん", "がっこう", "aから@"];
+function Typing(props: { layout: KeyboardLayout }) {
+  const romanRule = useMemo(() => loadPresetRuleRoman(props.layout), [props.layout]);
+  const words = useMemo(() => ["おをひく", "こんとん", "がっこう", "aから@"], []);
   const [automatons] = useState(
     words.map((w) => {
       return new BackspaceRequirdAutomaton(
-        emiel.rule.getRoman(props.layout).build(w)
+        romanRule.build(w)
       );
     })
   );
   const [index, setIndex] = useState(0);
   const [lastInputKey, setLastInputKey] = useState<
-    emiel.InputStroke | undefined
+    InputStroke | undefined
   >();
   const automaton = automatons[index];
   useEffect(() => {
-    return emiel.activate(window, (e) => {
+    return activate(window, (e) => {
       setLastInputKey(e.input);
-      if (e.input.key === emiel.VirtualKeys.Backspace) {
+      if (e.input.key === VirtualKeys.Backspace) {
         automaton.backFailedInput();
         return;
       }
@@ -38,7 +39,7 @@ function Typing(props: { layout: emiel.KeyboardLayout }) {
         setIndex((current) => (current + 1) % words.length);
       }
     });
-  }, [index]);
+  }, [index, automaton, words]);
   return (
     <>
       <h1>
@@ -71,8 +72,8 @@ function Typing(props: { layout: emiel.KeyboardLayout }) {
                     .getCharByKey(
                       f.input.key,
                       f.keyboardState.isAnyKeyDowned(
-                        emiel.VirtualKeys.ShiftLeft,
-                        emiel.VirtualKeys.ShiftRight
+                        VirtualKeys.ShiftLeft,
+                        VirtualKeys.ShiftRight
                       )
                     )
                     .replace(" ", "_")

examples/react-keyboardguide/src/App.tsx

@@ -1,11 +1,13 @@
-import { KeyRect, KeyTop, KeyboardState, guide, keyboard } from 'emiel'
+import { KeyRect, KeyTop, KeyboardState, KeyboardStateReader, PhysicalKeyboardLayoutName, activate, loadPresetKeyboardGuideJis106Default, loadPresetKeyboardGuideJis106JisKana, loadPresetKeyboardGuideJis106Nicola, loadPresetKeyboardGuideUs101Default, loadPresetKeyboardLayoutDvorak, loadPresetKeyboardLayoutQwertyJis, loadPresetKeyboardLayoutQwertyUs } from 'emiel';
 import { useEffect, useState } from 'react';
-import * as emiel from 'emiel';
+
+type LayoutName = "qwerty-jis" | "qwerty-us" | "dvorak";
+type GuideName = "us_101_default" | "jis_106_default" | "jis_106_jis_kana" | "jis_106_nicola";
 
 function App() {
-  const [keyboardState, setKeyboardState] = useState<emiel.KeyboardStateReader>(new KeyboardState([]));
+  const [keyboardState, setKeyboardState] = useState<KeyboardStateReader>(new KeyboardState([]));
   useEffect(() => {
-    emiel.activate(window, (evt) => {
+    activate(window, (evt) => {
       console.log("down", evt.input.key);
       setKeyboardState(evt.keyboardState)
     }, (evt) => {
@@ -14,15 +16,15 @@ function App() {
     }
     );
   }, []);
-  const [physicalLayoutName, setPhysicalLayoutName] = useState<emiel.PhysicalKeyboardLayoutName>("jis_106");
-  const [layoutName, setLayoutName] = useState("qwerty-jis");
-  const [guideName, setGuideName] = useState("us_101_default");
+  const [physicalLayoutName, setPhysicalLayoutName] = useState<PhysicalKeyboardLayoutName>("jis_106");
+  const [layoutName, setLayoutName] = useState<LayoutName>("qwerty-jis");
+  const [guideName, setGuideName] = useState<GuideName>("us_101_default");
   const [showVirtualKeyCodes, setShowVirtualKeyCodes] = useState(false);
   return <>
     <h1>Keyboard Guide</h1>
     <div style={{ height: "20px" }}></div>
-    <PhysicalLayoutSelector onLayoutChange={(layout: emiel.PhysicalKeyboardLayoutName) => setPhysicalLayoutName(layout)} />
-    <LayoutSelector onLayoutChange={(layoutName: string) => setLayoutName(layoutName)} />
+    <PhysicalLayoutSelector onLayoutChange={(layout: PhysicalKeyboardLayoutName) => setPhysicalLayoutName(layout)} />
+    <LayoutSelector onLayoutChange={(layoutName: LayoutName) => setLayoutName(layoutName)} />
     <GuideSelector onGuideChange={setGuideName} />
     <label><input type="checkbox" onClick={(e) => setShowVirtualKeyCodes(e.currentTarget.checked)} />仮想キーコードの表示</label>
     <div style={{ height: "20px" }}></div>
@@ -31,7 +33,7 @@ function App() {
 }
 
 function PhysicalLayoutSelector(props: {
-  onLayoutChange: (physicalLayoutName: emiel.PhysicalKeyboardLayoutName) => void,
+  onLayoutChange: (physicalLayoutName: PhysicalKeyboardLayoutName) => void,
 }) {
   const [selected, setSelected] = useState(0);
   return <>
@@ -59,7 +61,7 @@ function PhysicalLayoutSelector(props: {
 }
 
 function LayoutSelector(props: {
-  onLayoutChange: (layoutName: string) => void,
+  onLayoutChange: (layoutName: LayoutName) => void,
 }) {
   const [selected, setSelected] = useState(0);
   return <>
@@ -87,7 +89,7 @@ function LayoutSelector(props: {
 }
 
 function GuideSelector(props: {
-  onGuideChange: (guideName: string) => void,
+  onGuideChange: (guideName: GuideName) => void,
 }) {
   const [selected, setSelected] = useState(0);
   return <>
@@ -122,15 +124,24 @@ function GuideSelector(props: {
 }
 
 function KeyboardGuideComponent(props: {
-  layoutName: string,
+  layoutName: LayoutName,
   physicalLayoutName: string,
-  guideName: string,
-  kbdState: emiel.KeyboardStateReader,
+  guideName: GuideName,
+  kbdState: KeyboardStateReader,
   showVirtualKeyCodes: boolean,
 }) {
   // console.log("guide component", props.layout.name, props.kbdGuide.guideData.name);
-  const layout = keyboard.get(props.layoutName);
-  const kbdGuide = guide.get(props.guideName).swapPhysicalLayout(props.physicalLayoutName as emiel.PhysicalKeyboardLayoutName);
+  const layout = {
+    "qwerty-jis": loadPresetKeyboardLayoutQwertyJis,
+    "qwerty-us": loadPresetKeyboardLayoutQwertyUs,
+    "dvorak": loadPresetKeyboardLayoutDvorak
+  }[props.layoutName]();
+  const kbdGuide = {
+    "us_101_default": loadPresetKeyboardGuideUs101Default,
+    "jis_106_default": loadPresetKeyboardGuideJis106Default,
+    "jis_106_jis_kana": loadPresetKeyboardGuideJis106JisKana,
+    "jis_106_nicola": loadPresetKeyboardGuideJis106Nicola,
+  }[props.guideName]().swapPhysicalLayout(props.physicalLayoutName as PhysicalKeyboardLayoutName);
   return (
     <>
       <div style={{ position: "relative" }}>

examples/react-mixed-guide/src/App.tsx

@@ -1,17 +1,18 @@
+import { activate, detectKeyboardLayout, InputStroke, KeyboardLayout, loadPresetRuleRoman } from "emiel";
+import { useEffect, useMemo, useState } from "react";
 import "./App.css";
-import * as emiel from "emiel";
-import { useEffect, useState } from "react";
 import { MixedText, MixedTextAutomaton } from "./MixedGuide";
 
 function App() {
-  const [layout, setLayout] = useState<emiel.KeyboardLayout | undefined>();
+  const [layout, setLayout] = useState<KeyboardLayout | undefined>();
   useEffect(() => {
-    emiel.keyboard.detect(window).then(setLayout).catch(console.error);
+    detectKeyboardLayout(window).then(setLayout).catch(console.error);
   }, []);
   return layout ? <Typing layout={layout} /> : <></>;
 }
 
-function Typing(props: { layout: emiel.KeyboardLayout }) {
+function Typing(props: { layout: KeyboardLayout }) {
+  const romanRule = useMemo(() => loadPresetRuleRoman(props.layout), [props.layout]);
   const words = [
     new MixedText("お,を,ひ,く", "尾,を,引,く"),
     new MixedText("こん,とん", "混,沌"),
@@ -21,17 +22,17 @@ function Typing(props: { layout: emiel.KeyboardLayout }) {
   const [automatons] = useState(
     words.map((w) =>
       new MixedTextAutomaton(
-        emiel.rule.getRoman(props.layout).build(w.kanaText),
+        romanRule.build(w.kanaText),
         w,
       )
     )
   );
   const [index, setIndex] = useState(0);
   const [lastInputKey, setLastInputKey] = useState<
-    emiel.InputStroke | undefined
+    InputStroke | undefined
   >();
   useEffect(() => {
-    return emiel.activate(window, (e) => {
+    return activate(window, (e) => {
       setLastInputKey(e.input);
       const result = automatons[index].base.input(e);
       if (result.isFinished) {

examples/react-multi-word/src/App.tsx

@@ -1,6 +1,6 @@
+import { activate, Automaton, detectKeyboardLayout, InputEvent, InputResult, InputStroke, Inputtable, KeyboardLayout, loadPresetRuleRoman, Selector, VirtualKeys } from "emiel";
+import { useEffect, useMemo, useState } from "react";
 import "./App.css";
-import * as emiel from "emiel";
-import { useEffect, useState } from "react";
 import { Word } from "./word";
 
 // 繰り返し次のワードを生成するジェネレータ
@@ -22,10 +22,10 @@ const wordGen = (function* wordGenerator(): Generator<string, string> {
 // 初期ワード3つ
 const initialWords = Array.from({ length: 3 }, () => wordGen.next().value);
 
-class PositionAutomaton implements emiel.Inputtable {
-  constructor(readonly base: emiel.Automaton, readonly position: number) {
+class PositionAutomaton implements Inputtable {
+  constructor(readonly base: Automaton, readonly position: number) {
   }
-  input(stroke: emiel.InputEvent): emiel.InputResult {
+  input(stroke: InputEvent): InputResult {
     return this.base.input(stroke);
   }
   reset(): void {
@@ -34,57 +34,57 @@ class PositionAutomaton implements emiel.Inputtable {
 }
 
 function App() {
-  const [layout, setLayout] = useState<emiel.KeyboardLayout | undefined>();
+  const [layout, setLayout] = useState<KeyboardLayout | undefined>();
   useEffect(() => {
-    emiel.keyboard.detect(window).then(setLayout).catch(console.error);
+    detectKeyboardLayout(window).then(setLayout).catch(console.error);
   }, []);
   return layout ? <Typing layout={layout} /> : <></>;
 }
 
-function Typing(props: { layout: emiel.KeyboardLayout }) {
+function Typing(props: { layout: KeyboardLayout }) {
+  const romanRule = useMemo(() => loadPresetRuleRoman(props.layout), [props.layout]);
   const [selector, setSelector] = useState(
-    new emiel.Selector(
+    new Selector(
       // 各 automaton の metadata として表示位置をもたせる
       initialWords.map(
         (w, i) =>
           new PositionAutomaton(
-            emiel.rule.getRoman(props.layout).build(w),
+            romanRule.build(w),
             i
           )
       )
     )
   );
   const [lastInputKey, setLastInputKey] = useState<
-    emiel.InputStroke | undefined
+    InputStroke | undefined
   >();
   useEffect(() => {
-    return emiel.activate(window, (e) => {
+    return activate(window, (e) => {
       setLastInputKey(e.input);
       console.log("input:", e);
-      if (e.input.key === emiel.VirtualKeys.Escape) {
+      if (e.input.key === VirtualKeys.Escape) {
         console.log("reset");
         selector.reset();
         return;
       }
-      selector.input(e, {
-        finished: (a) => {
-          console.log("finished", a);
-          const newAutomaton =
-            new PositionAutomaton(
-              emiel.rule.getRoman(props.layout).build(wordGen.next().value),
-              a.position
-            );
-          setSelector((current) => current.replaced(a, newAutomaton));
-        },
-        succeeded: (a) => {
-          console.log("succeeded", a);
-        },
-        failed: (a) => {
-          console.log("failed", a);
-        },
+      const { finished, succeeded, failed } = selector.input(e);
+      finished.forEach((a) => {
+        console.log("finished", a);
+        const newAutomaton =
+          new PositionAutomaton(
+            romanRule.build(wordGen.next().value),
+            a.position
+          );
+        setSelector((current) => current.replaced(a, newAutomaton));
+      });
+      succeeded.forEach((a) => {
+        console.log("succeeded", a);
+      });
+      failed.forEach((a) => {
+        console.log("failed", a);
       });
     });
-  }, [selector]);
+  }, [selector, romanRule]);
 
   return (
     <>