pyret-embed 0.1.6 → 0.1.8

package/README.md

@@ -25,6 +25,28 @@ editor.embed.html work from your source.
    ```
 See examples/ for more examples!
 
+## Choosing the compiler backend
+
+The embedded editor can run on either the stock Pyret-hosted compiler or the
+TypeScript port of the compiler (`pyret-lang/src/ts-compiler`) — the same
+opt-in as code.pyret.org's `?compiler=ts` flag. Pass `compiler: 'ts'` in the
+config form of the API and the flag is appended to the embed URL for you:
+
+```
+const embed = await makeEmbedConfig({
+  container,
+  src: "/dist/build/web/editor.embed.html",
+  compiler: "ts",   // default: "pyret" (the stock compiler)
+  options: { footerStyle: "hide" },
+});
+```
+
+For self-hosted builds the ts artifacts (`cpo-main-ts.jarr.js`,
+`ts-compiler.js`) are only present if you build with `npm run build:ts`
+(which runs the regular build plus code.pyret.org's `make web-ts`); the
+default `npm run build` produces the stock-only bundle and the default
+behavior is unchanged.
+
 ## API
 
 ```

package/dist/build/web/css/editor.css

@@ -902,6 +902,27 @@ body.hideFooter .replContainer {
   padding-bottom: 0rem;
 }
 
+/* Unobtrusive compiler-flavor indicator, pinned to the REPL's corner just
+   above the footer padding. Hidden unless the page resolved to the ts
+   flavor (editor.html adds .ts-mode to <html> in the same branch that
+   swaps PYRET), so the stock editor shows nothing new. */
+#compilerFlavorBadge {
+  display: none;
+  position: absolute;
+  right: 8px;
+  bottom: calc(2.5rem + 4px);
+  font-size: 11px;
+  color: #999;
+  z-index: 1;
+  user-select: none;
+}
+html.ts-mode #compilerFlavorBadge {
+  display: block;
+}
+body.hideFooter #compilerFlavorBadge {
+  bottom: 4px;
+}
+
 body.hideHeader .replContainer {
   padding-top: 0px;
 }

package/dist/build/web/editor.embed.html

@@ -3,8 +3,40 @@
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
   <title>code.pyret.org</title>
-  <link crossorigin="anonymous" rel="preload" href="./js/cpo-main.jarr.js" as="script">
-  <script>window.PYRET = "./js/cpo-main.jarr.js"; window.PYRET_GZIPPED = "" === "true"; window.APP_NAME = "code.pyret.org"; window.APP_DOMAIN = "code.pyret.org";</script>
+  
+  <script>
+  window.PYRET = "./js/cpo-main.jarr.gz.js"; window.PYRET_GZIPPED = "true" === "true"; window.APP_NAME = "code.pyret.org"; window.APP_DOMAIN = "code.pyret.org";
+  // Opt-in TypeScript-compiler flavor: chosen by ?compiler=ts (or the
+  // server-side CPO_COMPILER env default). Swaps in the cpo-main-ts jarr
+  // and loads the TS compiler bundle; default behavior is unchanged.
+  //
+  // The ts asset URLs are never configured -- they are derived from PYRET's
+  // directory plus canonical names, a contract every host satisfies by
+  // publishing the three files side by side (deploys upload them together;
+  // static/webview builds copy them together). Both ts assets are gzip bytes
+  // at rest everywhere. No PYRET means no ts flavor: ?compiler=ts silently
+  // serves the stock compiler.
+  window.CPO_COMPILER = "pyret" || "pyret";
+  (function() {
+    var dir = window.PYRET ? window.PYRET.slice(0, window.PYRET.lastIndexOf("/") + 1) : "";
+    window.PYRET_TS = window.PYRET ? dir + "cpo-main-ts.jarr.gz.js" : "";
+    window.PYRET_TS_COMPILER = window.PYRET ? dir + "ts-compiler.gz.js" : "";
+    var m = /[?&]compiler=([^&]*)/.exec(window.location.search);
+    if(m) { window.CPO_COMPILER = decodeURIComponent(m[1]); }
+    if(window.CPO_COMPILER === "ts" && window.PYRET_TS) {
+      window.PYRET = window.PYRET_TS;
+      // Lets pure CSS show ts-only chrome (the "(ts mode)" badge in the
+      // REPL corner) without another script running at DOM-ready.
+      document.documentElement.classList.add("ts-mode");
+      // In gzipped mode the host may serve assets without an executable MIME
+      // type (nosniff), which refuses a <script src> load outright --
+      // beforePyret.js fetches the compiler bundle alongside the jarr instead.
+      if(!window.PYRET_GZIPPED) {
+        document.write('<script src="' + window.PYRET_TS_COMPILER + '"><\/script>');
+      }
+    }
+  })();
+  </script>
   <link rel="stylesheet" href="./css/reset.css" />
   <link rel="stylesheet" href="./css/smoothness-jquery-ui.css" />
   <link rel="stylesheet" href="./css/fira-mono.css" />
@@ -362,6 +394,7 @@
 </div>
 <div id="REPL" class="replContainer" role="region" aria-label="Interactions">
 <div id="handle" class="ui-resizable-handle ui-resizable-w"></div>
+<div id="compilerFlavorBadge" title="This session uses the TypeScript version of Pyret. Visit /settings/clear-ts to turn it off.">(ts mode)</div>
 </div>
 <div id="help-keys">
   <p><b>Press <kbd>Esc</kbd> to close this help window</b></p>

package/dist/build/web/editor.html

@@ -4,7 +4,39 @@
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
   <title>{{APP_NAME}}</title>
   {{^PYRET_GZIPPED}}<link crossorigin="anonymous" rel="preload" href="{{&PYRET}}" as="script">{{/PYRET_GZIPPED}}
-  <script>window.PYRET = "{{&PYRET}}"; window.PYRET_GZIPPED = "{{ PYRET_GZIPPED }}" === "true"; window.APP_NAME = "{{APP_NAME}}"; window.APP_DOMAIN = "{{APP_DOMAIN}}";</script>
+  <script>
+  window.PYRET = "{{&PYRET}}"; window.PYRET_GZIPPED = "{{ PYRET_GZIPPED }}" === "true"; window.APP_NAME = "{{APP_NAME}}"; window.APP_DOMAIN = "{{APP_DOMAIN}}";
+  // Opt-in TypeScript-compiler flavor: chosen by ?compiler=ts (or the
+  // server-side CPO_COMPILER env default). Swaps in the cpo-main-ts jarr
+  // and loads the TS compiler bundle; default behavior is unchanged.
+  //
+  // The ts asset URLs are never configured -- they are derived from PYRET's
+  // directory plus canonical names, a contract every host satisfies by
+  // publishing the three files side by side (deploys upload them together;
+  // static/webview builds copy them together). Both ts assets are gzip bytes
+  // at rest everywhere. No PYRET means no ts flavor: ?compiler=ts silently
+  // serves the stock compiler.
+  window.CPO_COMPILER = "{{&CPO_COMPILER}}" || "pyret";
+  (function() {
+    var dir = window.PYRET ? window.PYRET.slice(0, window.PYRET.lastIndexOf("/") + 1) : "";
+    window.PYRET_TS = window.PYRET ? dir + "cpo-main-ts.jarr.gz.js" : "";
+    window.PYRET_TS_COMPILER = window.PYRET ? dir + "ts-compiler.gz.js" : "";
+    var m = /[?&]compiler=([^&]*)/.exec(window.location.search);
+    if(m) { window.CPO_COMPILER = decodeURIComponent(m[1]); }
+    if(window.CPO_COMPILER === "ts" && window.PYRET_TS) {
+      window.PYRET = window.PYRET_TS;
+      // Lets pure CSS show ts-only chrome (the "(ts mode)" badge in the
+      // REPL corner) without another script running at DOM-ready.
+      document.documentElement.classList.add("ts-mode");
+      // In gzipped mode the host may serve assets without an executable MIME
+      // type (nosniff), which refuses a <script src> load outright --
+      // beforePyret.js fetches the compiler bundle alongside the jarr instead.
+      if(!window.PYRET_GZIPPED) {
+        document.write('<script src="' + window.PYRET_TS_COMPILER + '"><\/script>');
+      }
+    }
+  })();
+  </script>
   <link rel="stylesheet" href="{{ &BASE_URL }}/css/reset.css" />
   <link rel="stylesheet" href="{{ &BASE_URL }}/css/smoothness-jquery-ui.css" />
   <link rel="stylesheet" href="{{ &BASE_URL }}/css/fira-mono.css" />
@@ -362,6 +394,7 @@
 </div>
 <div id="REPL" class="replContainer" role="region" aria-label="Interactions">
 <div id="handle" class="ui-resizable-handle ui-resizable-w"></div>
+<div id="compilerFlavorBadge" title="This session uses the TypeScript version of Pyret. Visit /settings/clear-ts to turn it off.">(ts mode)</div>
 </div>
 <div id="help-keys">
   <p><b>Press <kbd>Esc</kbd> to close this help window</b></p>