human-language/app.html at main · link-assistant/human-language · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Human Language</title>
  <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="./app.css">
</head>
<body>
  <div id="root"></div>

  <!-- Babel-standalone transforms the .jsx scripts below in-browser. -->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

  <!-- React 19 from esm.sh, exposed on window so text/babel scripts can use it. -->
  <script type="module">
    import React from 'https://esm.sh/react@19';
    import ReactDOM from 'https://esm.sh/react-dom@19/client';
    window.React = React;
    window.ReactDOM = ReactDOM;
  </script>

  <!-- Shared library modules. Reuse the same versions used by entities.html /
       properties.html / transformation/index.html, exposing the bits the
       text/babel mode files need on window.HumanLanguageApp.

       NOTE: The mode `.jsx` files run through Babel-standalone, which compiles
       dynamic `import('./x.js')` calls into `require('./x.js')` — and `require`
       is not defined in the browser. So every ES module the mode files need
       has to be imported here (in a real `<script type="module">`) and exposed
       on `window.HumanLanguageApp`. -->
  <script type="module">
    import { STORAGE_KEYS, saveToLocalStorage, loadFromLocalStorage, flagMap, getQuotesForLanguage }
      from './js/src/settings.js';
    import { client as apiClient, cache as cacheManager, processor as dataProcessor,
             labelManager, searchUtility } from './js/src/wikidata-api-browser.js';
    import { MODES, DEFAULT_MODE, parseHash, serializeHash, subscribeToHash, navigate }
      from './js/src/app/routing.js';
    import * as ipa from './js/src/app/ipa.js';
    import { TextToQPTransformer } from './js/src/transformation/text-to-qp-transformer.js';
    import { TextTransformerTest, demonstrateTransformer } from './js/src/transformation/text-transformer-test.js';
    import { QPRenderer } from './js/src/generation/qp-to-text.js';
    import { CONSTRUCTORS, UN6_LANGUAGES, LANGUAGE_NAMES, buildConstructor, validateConstructor }
      from './js/src/generation/constructors.js';

    // Shared globals expected by the unified shell and legacy components
    // (statements.jsx, loading.jsx) that we re-mount inside the SPA.
    window.STORAGE_KEYS = STORAGE_KEYS;
    window.saveToLocalStorage = saveToLocalStorage;
    window.loadFromLocalStorage = loadFromLocalStorage;
    window.flagMap = flagMap;
    window.getQuotesForLanguage = getQuotesForLanguage;
    window.apiClient = apiClient;
    window.cacheManager = cacheManager;
    window.dataProcessor = dataProcessor;
    window.labelManager = labelManager;
    window.searchUtility = searchUtility;

    window.HumanLanguageApp = {
      STORAGE_KEYS,
      saveToLocalStorage,
      loadFromLocalStorage,
      flagMap,
      getQuotesForLanguage,
      MODES,
      DEFAULT_MODE,
      parseHash,
      serializeHash,
      subscribeToHash,
      navigate,
      ipa,
      TextToQPTransformer,
      TextTransformerTest,
      demonstrateTransformer,
      QPRenderer,
      CONSTRUCTORS,
      UN6_LANGUAGES,
      LANGUAGE_NAMES,
      buildConstructor,
      validateConstructor,
      modes: {},
    };
  </script>

  <!-- Component scripts (re-used verbatim from the existing pages). -->
  <script type="text/babel" src="./js/src/statements.jsx"></script>
  <script type="text/babel" src="./js/src/loading.jsx"></script>

  <!-- SPA shell + per-mode files. The order matters: shell.jsx defines the
       AppContext that every mode file imports through window.HumanLanguageApp. -->
  <script type="text/babel" src="./js/src/app/shell.jsx"></script>
  <script type="text/babel" src="./js/src/app/tests-panel.jsx"></script>
  <script type="text/babel" src="./js/src/app/modes/alphabet.jsx"></script>
  <script type="text/babel" src="./js/src/app/modes/dictionary.jsx"></script>
  <script type="text/babel" src="./js/src/app/modes/ontology.jsx"></script>
  <script type="text/babel" src="./js/src/app/modes/entity.jsx"></script>
  <script type="text/babel" src="./js/src/app/modes/property.jsx"></script>
  <script type="text/babel" src="./js/src/app/modes/transformer.jsx"></script>
  <script type="text/babel" src="./js/src/app/modes/generation.jsx"></script>

  <!-- Mount the SPA. We wait until the next macrotask so every text/babel
       script above has been transformed and executed before App reads
       `window.HumanLanguageApp.Shell` / `window.HumanLanguageApp.modes`. -->
  <script type="text/babel">
    (function bootApp() {
      const { Shell, modes, parseHash, subscribeToHash } = window.HumanLanguageApp;

      function App() {
        const [{ mode, params }, setRoute] = React.useState(() => parseHash(window.location.hash));
        React.useEffect(() => subscribeToHash(setRoute), []);
        const Mode = modes[mode] || modes.entity;
        return (
          <Shell mode={mode} params={params}>
            <Mode params={params} />
          </Shell>
        );
      }

      // Babel transforms scripts in order, but Babel registers the next script
      // for execution via a microtask: wait one tick so the modes module
      // assignments have happened before we render.
      setTimeout(() => {
        const root = ReactDOM.createRoot(document.getElementById('root'));
        root.render(<App />);
      }, 0);
    })();
  </script>
</body>
</html>