Allow importing json and images

Author: RoyalIcing

apps/components_guide_web/lib/components_guide_web/templates/react_typescript/_top.html.eex

@@ -14,6 +14,7 @@
       <li hidden><%= link("Event Handlers", to: '/react+typescript/event-handlers') %>
       <li><%= link("Logical Clocks", to: '/react+typescript/logical-clocks') %>
       <li><%= link("Forms", to: '/react+typescript/forms') %>
+      <li><%= link("Playground", to: '/react+typescript/editor') %>
     </ul>
   </nav>
 </div>

apps/components_guide_web/lib/components_guide_web/templates/react_typescript/editor.html.eex

@@ -93,14 +93,16 @@ export function Example() {
 
 value = `
 import { flavors } from "https://gist.githubusercontent.com/BurntCaramel/d9d2ca7ed6f056632696709a2ae3c413/raw/0234322cf854d52e2f2bd33aa37e8c8b00f9df0a/1.js";
+import reactDownloads from "https://api.npmjs.org/downloads/point/last-week/react";
+import image from "https://embed.filekitcdn.com/e/fEiVX4E3EdQhij4RMaw92W/pziZhFNQLKJtwNHMTkDnTD";
 
 const a = 1 + 1 + flavors.length;
 
 function useTick() {
   return useReducer(n => n + 1, 0);
 }
 
-function useDebouncer(duration) {
+function useDebouncedTick(duration) {
   const [count, tick] = useTick();
 
   const callback = useMemo(() => {
@@ -121,122 +123,19 @@ function useDebouncer(duration) {
   return [count, callback];
 }
 
-export default function App() {
-  const [count, tick] = useDebouncer(1000);
-  return <>
-    <div>Hello!! {flavors.join(" ")}</div>
-    <button onClick={tick}>Click</button>
-    <div>{count}</div>
-  </>;
-}
-`.trim();
-
-value = `
-import { flavors } from "https://gist.githubusercontent.com/BurntCaramel/d9d2ca7ed6f056632696709a2ae3c413/raw/0234322cf854d52e2f2bd33aa37e8c8b00f9df0a/1.js";
-
-const a = 1 + 1 + flavors.length;
-
-function useTick() {
-  return useReducer(n => n + 1, 0);
-}
-
-function useDebouncer(duration) {
-  const [count, tick] = useTick();
-
-  const callback = useMemo(() => {
-    let timeout = null;
-    function clear() {
-      if (timeout) {
-        clearTimeout(timeout);
-        timeout = null;
-      }
-    }
-    return () => {
-      clear()
-      timeout = setTimeout(tick, duration);
-      return clear;
-    };
-  }, [duration, tick]);
-
-  return [count, callback];
-}
-
-const cache = new Map();
-function cachedWork(key, work) {
-  const existing = cache.get(key);
-  if (existing) return existing;
-
-  const created = work();
-  cache.set(key, created);
-  return created;
-}
-
-function useCacheKey() {
-  const [key] = useState(() => Object(Symbol(Math.random())));
-  console.log('key', key);;
-  return key;
-}
-
-function useCached(work) {
-  const key = useCacheKey();
-  return cachedWork(key, work);
-}
-
-function useAsyncCached(work) {
-  const key = useCacheKey();
-  console.log(key);
-
-  let record = cache.get(key);
-
-  console.log('record', record)
-
-  if (record === undefined) {
-    record = {
-      status: 'pending',
-      result: undefined
-    };
-    cache.set(key, record);
-
-    const promise = work()
-      .then(result => {
-        record.status = 'succeeded';
-        record.result = result;
-      })
-      .catch(error => {
-        record.status = 'failed';
-        record.result = error;
-      });
-    record.promise = promise;
-  }
-
-  if (record.status === 'pending') {
-    throw record.promise;
-  }
-
-  if (record.status === 'failed') {
-    throw record.result;
-  }
-
-  return record.result;
-}
-
-function SHAComponent() {
-  const sha = useAsyncCached(() =>
-    crypto.subtle.digest('SHA-256', new TextEncoder().encode('abc'))
-      .then(arrayBuffer => {
-        return Array.from(new Uint8Array(arrayBuffer), chunk => chunk.toString(16).padStart(2, '0')).join('');
-      })
-  );
-
-  return <div>{sha}</div>;
+const decimalFormatter = new Intl.NumberFormat();
+function Decimal({ children }) {
+  return decimalFormatter.format(children);
 }
 
 export default function App() {
-  const [count, tick] = useDebouncer(1000);
+  const [count, tick] = useDebouncedTick(1000);
   return <>
     <div>Hello!! {flavors.join(" ")}</div>
     <button onClick={tick}>Click</button>
     <div>{count}</div>
+    <div>React was downloaded <Decimal>{reactDownloads.downloads}</Decimal> times last week.</div>
+    <img src={image} />
   </>;
 }
 `.trim();
@@ -319,9 +218,26 @@ require(["vs/editor/editor.main"], function () {
             // would probably need to be more complex.
             build.onLoad({ filter: /.*/, namespace: 'http-url' }, async (args) => {
               //console.log('loading', args.path);
-              let contents = await fetch(args.path).then(res => res.text());
-              //console.log('loaded', args.path, contents);
-              return { contents }
+              return await fetch(args.path).then(res => {
+                const contentType = res.headers.get('content-type') || '';
+
+                if (contentType.startsWith('image/')) {
+                  return res.arrayBuffer().then(buffer => {
+                    const url = URL.createObjectURL(new Blob([buffer], { type: contentType }));
+                    return { contents: url, loader: 'text' };
+                  })
+                } else {
+                  return res.text().then(contents => {
+                    if (contents[0] === '{') {
+                      // Likely JSON.
+                      return { contents: `export default ${contents};` };
+                    }
+
+                    return { contents };
+                  })
+                }
+
+              });
             })
           },
         }
@@ -331,6 +247,7 @@ require(["vs/editor/editor.main"], function () {
         //return esbuild.transform(body, { loader: 'jsx', format: 'iife', globalName: 'exports', plugins: [exampleOnResolvePlugin] }).then(content => content.code);
         return esbuild.build({
           bundle: true,
+          minify: true,
           stdin: {
             contents: `${prefix}\n${body ?? ""}\n${suffix}`,
             loader: 'jsx',

apps/components_guide_web/lib/components_guide_web/templates/react_typescript/logical-clocks.html.md

@@ -19,7 +19,7 @@ function useTick() {
 ## Debouncing
 
 ```ts
-export function useDebouncer(duration: number): readonly [number, EffectCallback] {
+export function useDebouncedTick(duration: number): readonly [number, EffectCallback] {
   const [count, tick] = useTick();
 
   const callback = useMemo(() => {
@@ -43,8 +43,8 @@ export function useDebouncer(duration: number): readonly [number, EffectCallback
 
 ```ts
 export function useDebouncedEffect(effect: EffectCallback, duration: number, deps: DependencyList): void {
-  const [count, didChange] = useDebouncer(duration);
-  useEffect(didChange, deps); // When our deps change, notify our debouncer.
+  const [count, tick] = useDebouncedTick(duration);
+  useEffect(tick, deps); // When our deps change, notify our debouncer.
   useEffect(effect, [count]); // When our debouncer finishes, run our effect.
 }
 ```