PrismJs

https://github.com/FormidableLabs/prism-react-renderer↗

jsinline

const importDefault = async (src) =>
  import("https://cdn.skypack.dev/" + src).then((m) => m.default);

return (async (fn) => {
  const Editor = lit.utils.ReactEditor.default;
  const editorProps = lit.utils.ReactEditor.defaultProps;
  const Highlight = lit.utils.PrismReactRenderer.default;
  const highlightProps = lit.utils.PrismReactRenderer.defaultProps;

  // return { Editor, Highlight };

  const React = lit.utils.React;
  const { Fragment, useState } = React;

  const exampleCode = `
(function someDemo() {
  var test = "Hello World!";
  console.log(test);
})();

return () => <App />;
`;

  const styles = {
    root: {
      boxSizing: "border-box",
      fontFamily: '"Dank Mono", "Fira Code", monospace',
    },
  };

  const EditorExample = (props) => {
    const [state, setState] = useState({ code: exampleCode });

    const onValueChange = (code) => {
      setState({ code });
    };

    const highlight = (code) => (
      <Highlight {...highlightProps} code={code} language="jsx">
        {({ className, style, tokens, getLineProps, getTokenProps }) => (
          <Fragment>
            {tokens.map((line, i) => (
              <div {...getLineProps({ line, key: i })}>
                {line.map((token, key) => (
                  <span {...getTokenProps({ token, key })} />
                ))}
              </div>
            ))}
          </Fragment>
        )}
      </Highlight>
    );

    return (
      <Editor
        {...editorProps}
        value={state.code}
        onValueChange={onValueChange}
        padding={10}
        highlight={highlight}
        style={styles.root}
      />
    );
  };

  return <EditorExample />;
})();

jscollapseinitial

const importDefault = async (src) =>
  import("https://cdn.skypack.dev/" + src).then((m) => m.default);

return (async (fn) => {
  const Editor = await importDefault("react-simple-code-editor");
  const Highlight = await importDefault("prism-react-renderer");
  const theme = await importDefault("prism-react-renderer/themes/nightOwl");

  return { Editor, Highlight, theme };

  const React = lit.utils.React;
  const { Fragment, useState } = React;

  const exampleCode = `
(function someDemo() {
  var test = "Hello World!";
  console.log(test);
})();

return () => <App />;
`;

  const styles = {
    root: {
      boxSizing: "border-box",
      fontFamily: '"Dank Mono", "Fira Code", monospace',
      ...theme.plain,
    },
  };

  const EditorExample = (props) => {
    const [state, setState] = useState({ code: exampleCode });

    const onValueChange = (code) => {
      setState({ code });
    };

    const highlight = (code) => (
      <Highlight theme={theme} code={code} language="jsx">
        {({ className, style, tokens, getLineProps, getTokenProps }) => (
          <Fragment>
            {tokens.map((line, i) => (
              <div {...getLineProps({ line, key: i })}>
                {line.map((token, key) => (
                  <span {...getTokenProps({ token, key })} />
                ))}
              </div>
            ))}
          </Fragment>
        )}
      </Highlight>
    );

    return (
      <Editor
        value={state.code}
        onValueChange={onValueChange}
        padding={10}
        style={styles.root}
      />
    );
  };

  return <EditorExample />;
})();

jsplugincollapsetype=replof=module< ./plugins/repls/module.js

export const repl = async (src, meta) => {
  const { btoa } = lit.utils.safeEncoders;
  const { transform } = lit.utils;
  const filename = (meta && meta.filename) || "untitled.js";
  let babel;
  try {
    babel = transform(filename, src);

    // So many hacks due to blob and/or data uri
    // - cachbusting comment
    // - rewrite imports urls to be absolute
    const s =
      `/*${Date.now()}*/` +
      babel.code.replace(
        /HORRIBLE_HACK([^'"]+)/g,
        //location.href
        new URL(".", location.href).toString() + "$1"
      );
    const console = "fake me";
    // const url = `data:text/javascript;base64,${btoa(s)}`
    const url = URL.createObjectURL(new Blob([s], { type: "text/javascript" }));
    const m = await import(url + "#location=" + location.href);
    if (typeof m.default === "function") {
      const res = await m.default.call({ console });
      return lit.utils.inspect(res);
    } else return lit.utils.inspect(m);
  } catch (err) {
    return err.message;
  }
};

jsmodulecollapsev2test

import Editor, {defaultProps as eprops} from "https://cdn.skypack.dev/react-simple-code-editor";
import Highlight, {
  defaultProps as hprops 
} from "https://cdn.skypack.dev/prism-react-renderer";
// import theme from "https://cdn.skypack.dev/prism-react-renderer/themes/nightOwl";

// return { Editor, Highlight, theme };

const React = lit.utils.React;
const { Fragment, useState } = React;

const exampleCode = `
(function someDemo() {
  var test = "Hello World!";
  console.log(test);
})();

return () => <App />;
`;

const styles = {
  root: {
    boxSizing: "border-box",
    fontFamily: '"Dank Mono", "Fira Code", monospace',
  },
};

const EditorExample = (props) => {
  const [state, setState] = useState({ code: exampleCode });

  const onValueChange = (code) => {
    setState({ code });
  };

  const highlight = (code) => (
    <Highlight {...{hprops}} code={code} language="jsx">
      {({ className, style, tokens, getLineProps, getTokenProps }) => (
        <Fragment>
          {tokens.map((line, i) => (
            <div {...getLineProps({ line, key: i })}>
              {line.map((token, key) => (
                <span {...getTokenProps({ token, key })} />
              ))}
            </div>
          ))}
        </Fragment>
      )}
    </Highlight>
  );

  return (
    <Editor
      {...eprops}
      value={state.code}
      onValueChange={onValueChange}
      highlight={highlight}
      padding={10}
      style={styles.root}
    />
  );
};

export const returns = <EditorExample />;

txtUpdated 140w ago

Importing binding name 'defaultProps' is not found.

return lit.utils

txtUpdated 140.3w ago

{ inspect: 
   { [Function: inspect]
     colors: 
      { bold: [Object],
        italic: [Object],
        underline: [Object],
        inverse: [Object],
        white: [Object],
        grey: [Object],
        black: [Object],
        blue: [Object],
        cyan: [Object],
        green: [Object],
        magenta: [Object],
        red: [Object],
        yellow: [Object] },
     styles: 
      { special: 'cyan',
        number: 'yellow',
        boolean: 'yellow',
        undefined: 'grey',
        null: 'bold',
        string: 'green',
        date: 'magenta',
        regexp: 'red' } },
  diff: 
   { Diff: [Getter],
     diffChars: [Getter],
     diffWords: [Getter],
     diffWordsWithSpace: [Getter],
     diffLines: [Getter],
     diffTrimmedLines: [Getter],
     diffSentences: [Getter],
     diffCss: [Getter],
     diffJson: [Getter],
     canonicalize: [Getter],
     diffArrays: [Getter],
     applyPatch: [Getter],
     applyPatches: [Getter],
     parsePatch: [Getter],
     merge: [Getter],
     structuredPatch: [Getter],
     createTwoFilesPatch: [Getter],
     createPatch: [Getter],
     convertChangesToDMP: [Getter],
     convertChangesToXML: [Getter] },
  React: 
   { Fragment: {},
     StrictMode: {},
     Profiler: {},
     Suspense: {},
     Children: 
      { map: [Function: mapChildren],
        forEach: [Function: forEachChildren],
        count: [Function: countChildren],
        toArray: [Function: toArray],
        only: [Function: onlyChild] },
     Component: [Function: Component],
     PureComponent: [Function: PureComponent],
     __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: 
      { ReactCurrentDispatcher: [Object],
        ReactCurrentBatchConfig: [Object],
        ReactCurrentOwner: [Object],
        IsSomeRendererActing: [Object],
        assign: [Function: assign],
        ReactDebugCurrentFrame: [Object] },
     cloneElement: [Function: cloneElementWithValidation],
     createContext: [Function: createContext],
     createElement: [Function: createElementWithValidation],
     createFactory: [Function: createFactoryWithValidation],
     createRef: [Function: createRef],
     forwardRef: [Function: forwardRef],
     isValidElement: [Function: isValidElement],
     lazy: [Function: lazy],
     memo: [Function: memo],
     useCallback: [Function: useCallback],
     useContext: [Function: useContext],
     useDebugValue: [Function: useDebugValue],
     useEffect: [Function: useEffect],
     useImperativeHandle: [Function: useImperativeHandle],
     useLayoutEffect: [Function: useLayoutEffect],
     useMemo: [Function: useMemo],
     useReducer: [Function: useReducer],
     useRef: [Function: useRef],
     useState: [Function: useState],
     version: '17.0.1' },
  ReactDOM: 
   { __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: { Events: [Object] },
     createPortal: [Function: createPortal$1],
     findDOMNode: [Function: findDOMNode],
     flushSync: [Function: flushSync],
     hydrate: [Function: hydrate],
     render: [Function: render],
     unmountComponentAtNode: [Function: unmountComponentAtNode],
     unstable_batchedUpdates: [Function: batchedUpdates$1],
     unstable_createPortal: [Function: unstable_createPortal],
     unstable_renderSubtreeIntoContainer: [Function: renderSubtreeIntoContainer],
     version: '17.0.1' },
  PrismReactRenderer: { Prism: [Getter], default: [Getter], defaultProps: [Getter] },
  ReactEditor: { default: { [Function: Editor] defaultProps: [Object] } },
  unist: 
   { select: 
      { matches: [Function: matches],
        selectAll: [Function: selectAll],
        select: [Function: select] },
     source: [Function: source],
     filter: [Function: filter],
     visit: { [Function: visit] CONTINUE: true, SKIP: 'skip', EXIT: false },
     patchSource: { default: [Getter] },
     selectPosition: { atPos: [Getter], selectAll: [Getter] } },
  mdast: { to_string: [Function: to_string] },
  momento: { MsToRelative: [Getter], DatesToRelativeDelta: [Getter] },
  colors: { pickTextColorBasedOnBgColor: [Getter], stringToHex: [Getter] },
  safeEncoders: 
   { btoa: [Getter],
     atob: [Getter],
     b64EncodeUnicode: [Getter],
     b64DecodeUnicode: [Getter] },
  fns: 
   { NoOp: [Getter],
     Identity: [Getter],
     AsInt: [Getter],
     Undef: [Getter],
     getMeta: [Getter],
     posstr: [Getter],
     wait: [Getter],
     template: [Getter] },
  path: 
   { resolve: [Function: resolve],
     normalize: [Function: normalize],
     absolute: [Function: absolute],
     join: [Function: join],
     relative: [Function: relative],
     _makeLong: [Function: _makeLong],
     dirname: [Function: dirname],
     basename: [Function: basename],
     extname: [Function: extname],
     format: [Function: format],
     parse: [Function: parse],
     sep: '/',
     delimiter: ':',
     win32: null,
     posix: [Circular] },
  querystring: 
   { parse: [Function],
     decode: [Function],
     stringify: [Function],
     encode: [Function] },
  vfile: [Function: VFile],
  delete: [Function: _delete],
  read: [Function: read] }

PrismJs

Backlinks (1)