57 | startDrag({ e, dir: "columns", index: gap_index })
58 | }
59 | style={{
60 | gridColumn: gap_index,
61 | }}
62 | />
63 | ))}
64 | {rowSizers.map((gap_index) => (
65 |
startDrag({ e, dir: "rows", index: gap_index })}
68 | className="ResizableGrid--row-sizer"
69 | style={{
70 | gridRow: gap_index,
71 | }}
72 | />
73 | ))}
74 | {children}
75 |
76 | );
77 | }
78 |
79 | function buildRange(from: number, to: number): number[] {
80 | const numEls = Math.abs(to - from) + 1;
81 | const step = from < to ? 1 : -1;
82 | return Array.from({ length: numEls }, (_, i) => from + i * step);
83 | }
84 |
--------------------------------------------------------------------------------
/src/Components/ShareModal.css:
--------------------------------------------------------------------------------
1 | .ShareModal {
2 | position: absolute;
3 | top: 50px;
4 | left: 50px;
5 | width: 600px;
6 | font-family: var(--font-face);
7 | background: white;
8 | border: 1px solid #ccc;
9 | border-radius: 5px;
10 | padding: 8px 14px;
11 | transition: 0.4s ease-out;
12 | box-shadow: 0.5rem 0.5rem 2rem rgb(0 0 0 / 30%);
13 | z-index: 10;
14 | }
15 |
16 | .ShareModal .ShareModal--item {
17 | padding-bottom: 10px;
18 | }
19 | .ShareModal .ShareModal--item .ShareModal--checkbox {
20 | margin-left: 1em;
21 | font-size: 0.9em;
22 | }
23 | .ShareModal .ShareModal--row {
24 | display: flex;
25 | }
26 |
27 | .ShareModal .ShareModal--row label {
28 | display: flex;
29 | align-items: center;
30 | }
31 |
32 | .ShareModal .ShareModal--row label span {
33 | margin-left: 0.3em;
34 | }
35 |
36 | .ShareModal .ShareModal--row .ShareModal--url {
37 | display: inline-flex;
38 | position: relative;
39 | vertical-align: top;
40 | width: 100%;
41 | }
42 |
43 | .ShareModal .ShareModal--row .ShareModal--url .ShareModal--urlinput {
44 | font-family: var(--font-mono-face);
45 | font-size: var(--font-mono-size);
46 | width: 100%;
47 | margin-right: 12px;
48 | }
49 |
50 | .ShareModal-overlay {
51 | opacity: 0.5;
52 | background: #000;
53 | width: 100%;
54 | height: 100%;
55 | z-index: 9;
56 | top: 0;
57 | left: 0;
58 | position: fixed;
59 | }
60 |
--------------------------------------------------------------------------------
/src/Components/Terminal.css:
--------------------------------------------------------------------------------
1 | /*
2 | This very-specific selector is needed to override some settings from App.css.
3 | */
4 | .shinylive-terminal.terminal {
5 | height: 100%;
6 | position: relative;
7 | overflow: hidden;
8 | padding: 0.5rem;
9 | --color: #333;
10 | --background: white;
11 | --size: 1;
12 | --font: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
13 | }
14 |
15 | .xterm {
16 | padding: 8px;
17 | }
18 |
--------------------------------------------------------------------------------
/src/Components/Viewer.css:
--------------------------------------------------------------------------------
1 | .shinylive-viewer {
2 | height: 100%;
3 | width: 100%;
4 | position: relative;
5 | }
6 |
7 | .app-frame {
8 | border-radius: var(--panel-roundness);
9 | border: 0;
10 | }
11 |
12 | .shinylive-viewer iframe {
13 | background-color: white;
14 | width: 100%;
15 | height: 100%;
16 | display: block;
17 | }
18 |
19 | .shinylive-viewer .loading-wrapper {
20 | overflow: auto;
21 | background-color: white;
22 | position: absolute;
23 | height: 100%;
24 | width: 100%;
25 | top: 0px;
26 | left: 0px;
27 | display: flex;
28 | justify-content: center;
29 | align-items: center;
30 | }
31 |
32 | .shinylive-viewer .loading-wrapper.loading-wrapper-error {
33 | justify-content: left;
34 | }
35 |
36 | .shinylive-viewer .loading-wrapper .error-alert {
37 | text-align: center;
38 | font-size: 1.4rem;
39 | font-family: var(--font-face);
40 | -webkit-animation: loading-animation-fade-in 0.5s;
41 | animation: loading-animation-fade-in 0.5s;
42 | }
43 |
44 | .shinylive-viewer .loading-wrapper .error-alert .error-icon {
45 | display: inline-block;
46 | text-align: center;
47 | width: 85px;
48 | margin-bottom: 0.5rem;
49 | }
50 |
51 | .shinylive-viewer .loading-wrapper .error-alert .error-log {
52 | font-size: 0.7rem;
53 | text-align: left;
54 | padding: 0.3rem;
55 | }
56 |
57 | @keyframes loading-animation-fade-in {
58 | 0% {
59 | opacity: 0;
60 | }
61 | 100% {
62 | opacity: 1;
63 | }
64 | }
65 |
--------------------------------------------------------------------------------
/src/Components/codeMirror/language-server/diagnostics.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * (c) 2021, Micro:bit Educational Foundation and contributors
3 | *
4 | * SPDX-License-Identifier: MIT
5 | */
6 | import { setDiagnostics, type Diagnostic } from "@codemirror/lint";
7 | import type { EditorState, Text, Transaction } from "@codemirror/state";
8 | import type { EditorView } from "@codemirror/view";
9 | import * as LSP from "vscode-languageserver-protocol";
10 | import { positionToOffset } from "./positions";
11 |
12 | /// An action associated with a diagnostic.
13 | export interface Action {
14 | /// The label to show to the user. Should be relatively short.
15 | name: string;
16 | /// The function to call when the user activates this action. Is
17 | /// given the diagnostic's _current_ position, which may have
18 | /// changed since the creation of the diagnostic due to editing.
19 | apply: (view: EditorView, from: number, to: number) => void;
20 | }
21 |
22 | const severityMapping = {
23 | [LSP.DiagnosticSeverity.Error]: "error",
24 | [LSP.DiagnosticSeverity.Warning]: "warning",
25 | [LSP.DiagnosticSeverity.Information]: "info",
26 | // [LSP.DiagnosticSeverity.Hint]: "hint",
27 | [LSP.DiagnosticSeverity.Hint]: "info",
28 | } as const;
29 |
30 | export const diagnosticsMapping = (
31 | document: Text,
32 | lspDiagnostics: LSP.Diagnostic[],
33 | ): Diagnostic[] =>
34 | lspDiagnostics
35 | .map(({ range, message, severity, tags }): Diagnostic | undefined => {
36 | const from = positionToOffset(document, range.start);
37 | const to = positionToOffset(document, range.end);
38 | // Skip if we can't map to the current document.
39 | if (from !== undefined && to !== undefined) {
40 | return {
41 | from,
42 | to,
43 | // Missing severity is client defined. Warn for now.
44 | severity: severityMapping[severity ?? LSP.DiagnosticSeverity.Warning],
45 | message,
46 | };
47 | }
48 | return undefined;
49 | })
50 | .filter((x): x is Diagnostic => Boolean(x));
51 |
52 | /**
53 | * Given an EditorState object and a LSP.Diagnostic[] for that state's
54 | * document, generate and return a Transaction for that EditorState that
55 | * that has diagnostics added to it.
56 | */
57 | export function diagnosticToTransaction(
58 | editorState: EditorState,
59 | lspDiagnostics: LSP.Diagnostic[],
60 | ): Transaction {
61 | const diagnostics = diagnosticsMapping(editorState.doc, lspDiagnostics);
62 |
63 | const diagnosticsTransaction = editorState.update(
64 | setDiagnostics(editorState, diagnostics),
65 | );
66 |
67 | return diagnosticsTransaction;
68 | }
69 |
--------------------------------------------------------------------------------
/src/Components/codeMirror/language-server/documentation.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * (c) 2021, Micro:bit Educational Foundation and contributors
3 | *
4 | * SPDX-License-Identifier: MIT
5 | */
6 | import DOMPurify from "dompurify";
7 | import { marked } from "marked";
8 | import { MarkupContent } from "vscode-languageserver-types";
9 |
10 | export const renderDocumentation = (
11 | documentation: MarkupContent | string | undefined,
12 | ): HTMLElement => {
13 | if (!documentation) {
14 | documentation = "No documentation";
15 | }
16 | const div = document.createElement("div");
17 | div.className = "docstring";
18 | if (MarkupContent.is(documentation) && documentation.kind === "markdown") {
19 | try {
20 | div.innerHTML = renderMarkdown(documentation.value).__html;
21 | return div;
22 | } catch (e) {
23 | // Fall through to simple text below.
24 | }
25 | }
26 | const fallbackContent = MarkupContent.is(documentation)
27 | ? documentation.value
28 | : documentation;
29 |
30 | const p = div.appendChild(document.createElement("p"));
31 | p.appendChild(new Text(fallbackContent));
32 | return div;
33 | };
34 |
35 | export interface SanitisedHtml {
36 | __html: string;
37 | }
38 |
39 | // Workaround to open links in a new tab.
40 | DOMPurify.addHook("afterSanitizeAttributes", function (node) {
41 | if (node.tagName === "A") {
42 | node.setAttribute("target", "_blank");
43 | node.setAttribute("rel", "noopener");
44 | }
45 | });
46 |
47 | export const renderMarkdown = (markdown: string): SanitisedHtml => {
48 | const html = DOMPurify.sanitize(
49 | marked.parse(markdown, { gfm: true, headerIds: false, mangle: false }),
50 | );
51 | return {
52 | __html: html,
53 | };
54 | };
55 |
--------------------------------------------------------------------------------
/src/Components/codeMirror/language-server/hover.ts:
--------------------------------------------------------------------------------
1 | import type { Extension } from "@codemirror/state";
2 | import { hoverTooltip, type Tooltip } from "@codemirror/view";
3 | import {
4 | HoverRequest,
5 | type HoverParams,
6 | type MarkupContent,
7 | } from "vscode-languageserver-protocol";
8 | import {
9 | createUri,
10 | type LanguageServerClient,
11 | } from "../../../language-server/client";
12 | import { renderDocumentation } from "./documentation";
13 | import { offsetToPosition } from "./positions";
14 |
15 | export function hover(
16 | lspClient: LanguageServerClient,
17 | filename: string,
18 | ): Extension {
19 | return createHoverTooltip(lspClient, filename);
20 | }
21 |
22 | function createHoverTooltip(
23 | client: LanguageServerClient,
24 | filename: string,
25 | ): Extension {
26 | const uri = createUri(filename);
27 |
28 | return hoverTooltip(async (view, pos, side): Promise
=> {
29 | offsetToPosition(view.state.doc, pos);
30 |
31 | const params: HoverParams = {
32 | textDocument: { uri },
33 | position: offsetToPosition(view.state.doc, pos),
34 | };
35 |
36 | const result = await client.connection.sendRequest(
37 | HoverRequest.type,
38 | params,
39 | );
40 | if (result === null) return null;
41 |
42 | // console.log(result);
43 |
44 | return {
45 | pos: pos,
46 | above: true,
47 | create(view) {
48 | const dom = renderDocumentation(result?.contents as MarkupContent);
49 | // console.log(dom);
50 | return { dom };
51 | },
52 | };
53 | });
54 | }
55 |
--------------------------------------------------------------------------------
/src/Components/codeMirror/language-server/lsp-extension.ts:
--------------------------------------------------------------------------------
1 | import type { Extension } from "@codemirror/state";
2 | import { EditorView, type ViewUpdate } from "@codemirror/view";
3 | import type { TextDocumentContentChangeEvent } from "vscode-languageserver-protocol";
4 | import type { LanguageServerClient } from "../../../language-server/client";
5 | import { inferFiletype } from "../../../utils";
6 | import { autocompletion } from "./autocompletion";
7 | import { hover } from "./hover";
8 | import { offsetToPosition } from "./positions";
9 | import { signatureHelp } from "./signatureHelp";
10 |
11 | export function languageServerExtensions(
12 | lspClient: LanguageServerClient,
13 | filename: string,
14 | ): Extension[] {
15 | if (inferFiletype(filename) !== "python") {
16 | return [];
17 | }
18 |
19 | return [
20 | EditorView.updateListener.of((u: ViewUpdate) => {
21 | if (u.docChanged) {
22 | // Send content updates to the language server. The easy but slow way to
23 | // do this is to send the entire document each time. However, we do an
24 | // optimization, where we send just changes. We collect them in
25 | // `allChanges` when we call `.iterChanges()`.
26 | let changeEvent: TextDocumentContentChangeEvent | null = null;
27 | let nChanges = 0; // Will either be 1 or 2 at the end
28 |
29 | u.changes.iterChanges((fromA, toA, fromB, toB, inserted) => {
30 | if (nChanges >= 2) return;
31 | nChanges += 1;
32 |
33 | changeEvent = {
34 | range: {
35 | start: offsetToPosition(u.startState.doc, fromA),
36 | end: offsetToPosition(u.startState.doc, toA),
37 | },
38 | text: inserted.sliceString(0),
39 | };
40 | });
41 |
42 | // If we got here, then changeEvent must be non-null.
43 | changeEvent = changeEvent as unknown as TextDocumentContentChangeEvent;
44 |
45 | if (nChanges === 1) {
46 | // If we had exactly one change, send it to the Language Server.
47 | // eslint-disable-next-line @typescript-eslint/no-floating-promises
48 | lspClient.changeFile(filename, changeEvent);
49 | } else {
50 | // If we had more than one change (because of multiple cursors), don't
51 | // send the changes; send the entire document. This is a bit slower,
52 | // but necessary. The issue is that in CodeMirror, the changes events
53 | // are recorded simultaneously, so the start position of each change
54 | // is the position of each cursor at t0. However, the Language Server
55 | // expects the changes to be recordered in order, which means that it
56 | // expects the cursor positions at t0, t1, t2, etc. These two schemes
57 | // aren't compatible, so we'll just send the entire document.
58 | // eslint-disable-next-line @typescript-eslint/no-floating-promises
59 | lspClient.changeFile(filename, { text: u.view.state.doc.toString() });
60 | }
61 | }
62 | }),
63 | autocompletion(lspClient, filename),
64 | signatureHelp(lspClient, filename, true),
65 | hover(lspClient, filename),
66 | ];
67 | }
68 |
--------------------------------------------------------------------------------
/src/Components/codeMirror/language-server/names.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * (c) 2021, Micro:bit Educational Foundation and contributors
3 | *
4 | * SPDX-License-Identifier: MIT
5 | */
6 |
7 | export const removeFullyQualifiedName = (fn: string): string => {
8 | const bracket = fn.indexOf("(");
9 | const before = fn.substring(0, bracket);
10 | const remainder = fn.substring(bracket);
11 |
12 | const parts = before.split(".");
13 | const name = parts[parts.length - 1];
14 | return name + remainder;
15 | };
16 |
17 | export const nameFromSignature = (fn: string): string => {
18 | const bracket = fn.indexOf("(");
19 | const before = fn.substring(0, bracket);
20 | return before;
21 | };
22 |
--------------------------------------------------------------------------------
/src/Components/codeMirror/language-server/positions.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * (c) 2021, Micro:bit Educational Foundation and contributors
3 | *
4 | * SPDX-License-Identifier: MIT
5 | */
6 | import type { Text } from "@codemirror/state";
7 | import type { Position, Range } from "vscode-languageserver-protocol";
8 |
9 | // See https://microsoft.github.io/language-server-protocol/specifications/specification-3-17/#position
10 |
11 | export const positionToOffset = (
12 | document: Text,
13 | position: Position,
14 | ): number | undefined => {
15 | if (position.line >= document.lines) {
16 | return undefined;
17 | }
18 | const offset = document.line(position.line + 1).from + position.character;
19 | if (offset > document.length) return;
20 | return offset;
21 | };
22 |
23 | export const offsetToPosition = (document: Text, offset: number): Position => {
24 | const line = document.lineAt(offset);
25 | return {
26 | line: line.number - 1,
27 | character: offset - line.from,
28 | };
29 | };
30 |
31 | export const inRange = (range: Range, position: Position): boolean =>
32 | !isBefore(position, range.start) && !isAfter(position, range.end);
33 |
34 | const isBefore = (p1: Position, p2: Position): boolean =>
35 | p1.line < p2.line || (p1.line === p2.line && p1.character < p2.character);
36 |
37 | const isAfter = (p1: Position, p2: Position): boolean =>
38 | p1.line > p2.line || (p1.line === p2.line && p1.character > p2.character);
39 |
--------------------------------------------------------------------------------
/src/Components/codeMirror/language-server/regexp-util.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * (c) 2021, Micro:bit Educational Foundation and contributors
3 | *
4 | * SPDX-License-Identifier: MIT
5 | */
6 |
7 | /**
8 | * Escape a regular expression.
9 | *
10 | * @param unescaped A string.
11 | * @returns A regular expression that matches the literal string.
12 | */
13 | export const escapeRegExp = (unescaped: string) => {
14 | return unescaped.replace(/[-/\\^$*+?.()|[\]{}]/g, "\\$&");
15 | };
16 |
--------------------------------------------------------------------------------
/src/Components/codeMirror/utils.ts:
--------------------------------------------------------------------------------
1 | import type { Text } from "@codemirror/state";
2 | import type { EditorView } from "@codemirror/view";
3 |
4 | export type CursorPosition = { line: number; col: number };
5 |
6 | export function offsetToPosition(cmDoc: Text, offset: number): CursorPosition {
7 | const line = cmDoc.lineAt(offset);
8 | return { line: line.number, col: offset - line.from };
9 | }
10 |
11 | export function positionToOffset(cmDoc: Text, pos: CursorPosition): number {
12 | const line = cmDoc.line(pos.line);
13 | // Try go to the next computed position (line.from + pos.col), but don't go
14 | // past the end of the line (line.to).
15 | const newOffset = Math.min(line.from + pos.col, line.to);
16 |
17 | // If the new offset is beyond the end of the document, just go to the end.
18 | if (newOffset > cmDoc.length) {
19 | return cmDoc.length;
20 | }
21 | return newOffset;
22 | }
23 |
24 | export function getSelectedText(cmView: EditorView): string {
25 | const cmState = cmView.state;
26 | return cmState.sliceDoc(
27 | cmState.selection.main.from,
28 | cmState.selection.main.to,
29 | );
30 | }
31 |
32 | export function getCurrentLineText(cmView: EditorView): string {
33 | const cmState = cmView.state;
34 | const offset = cmState.selection.main.head;
35 | const pos = offsetToPosition(cmState.doc, offset);
36 | const lineText = cmState.doc.line(pos.line).text;
37 | return lineText;
38 | }
39 |
40 | export function moveCursorToNextLine(cmView: EditorView): void {
41 | const cmState = cmView.state;
42 | const offset = cmState.selection.main.head;
43 | const pos = offsetToPosition(cmState.doc, offset);
44 | pos.line += 1;
45 |
46 | // Don't go past the bottom
47 | if (pos.line > cmState.doc.lines) {
48 | return;
49 | }
50 |
51 | const nextLineOffset = positionToOffset(cmState.doc, pos);
52 | cmView.dispatch({ selection: { anchor: nextLineOffset } });
53 | }
54 |
--------------------------------------------------------------------------------
/src/Components/filecontent.ts:
--------------------------------------------------------------------------------
1 | // Shape of file content from user input (i.e. examples.json, data structure
2 | // passed to App.runApp). If the type is "binary", then content is a
3 | import { stringToUint8Array, uint8ArrayToString } from "../utils";
4 |
5 | // base64-encoded string representation of the data.
6 | export type FileContentJson = {
7 | name: string;
8 | content: string;
9 | type?: "text" | "binary";
10 | };
11 |
12 | // Completed data structure for internal use. This also represents binary data
13 | // as a Uint8Array.
14 | export type FileContent =
15 | | {
16 | name: string;
17 | content: string;
18 | type: "text";
19 | }
20 | | {
21 | name: string;
22 | content: Uint8Array;
23 | type: "binary";
24 | };
25 |
26 | // Convert FileContentJson to FileContent.
27 | export function FCJSONtoFC(x: FileContentJson): FileContent {
28 | if (x.type === "binary") {
29 | return {
30 | name: x.name,
31 | content: stringToUint8Array(window.atob(x.content)),
32 | type: "binary",
33 | };
34 | } else {
35 | return {
36 | name: x.name,
37 | content: x.content,
38 | type: "text",
39 | };
40 | }
41 | }
42 |
43 | // Sometimes we don't know whether the input is a FileContent or a
44 | // FileContentJson. This function will take either tpye and convert it to a
45 | // FileContent.
46 | export function FCorFCJSONtoFC(x: FileContent | FileContentJson): FileContent {
47 | if (x.type === "binary") {
48 | if (typeof x.content === "string") {
49 | return FCJSONtoFC(x as FileContentJson);
50 | } else {
51 | return x as FileContent;
52 | }
53 | } else {
54 | return {
55 | name: x.name,
56 | content: x.content,
57 | type: "text",
58 | };
59 | }
60 | }
61 |
62 | /**
63 | * Convert FileContent to FileContentJson.
64 | */
65 | export function FCtoFCJSON(x: FileContent): FileContentJson {
66 | if (x.type === "binary") {
67 | return {
68 | name: x.name,
69 | content: window.btoa(uint8ArrayToString(x.content)),
70 | type: "binary",
71 | };
72 | } else {
73 | return {
74 | name: x.name,
75 | content: x.content,
76 | // To save a bit of space, don't include type:"text".
77 | };
78 | }
79 | }
80 |
--------------------------------------------------------------------------------
/src/Components/gist.ts:
--------------------------------------------------------------------------------
1 | // Shape of file content from user input (i.e. examples.json, data structure
2 | // passed to App.runApp). If the type is "binary", then content is a
3 | import { isBinary, stringToUint8Array, uint8ArrayToString } from "../utils";
4 | import type { FileContent } from "./filecontent";
5 |
6 | export type GistApiResponse = {
7 | url: string;
8 | id: string;
9 | files: {
10 | [filename: string]: GistFile;
11 | };
12 | public: boolean;
13 | created_at: string;
14 | updated_at: string;
15 | description: string;
16 | comments: 1;
17 | };
18 |
19 | type GistFile = {
20 | filename: string;
21 | type: string;
22 | language: string;
23 | raw_url: string;
24 | size: number;
25 | truncated: boolean;
26 | // content is base64-encoded, even for text files, because we make the
27 | // request with Accept: "application/vnd.github.v3.base64".
28 | content: string;
29 | };
30 |
31 | export async function fetchGist(id: string): Promise {
32 | const response = await fetch("https://api.github.com/gists/" + id, {
33 | headers: {
34 | Accept: "application/vnd.github.v3.base64",
35 | },
36 | });
37 | const gistData = (await response.json()) as GistApiResponse;
38 | return gistData;
39 | }
40 |
41 | export async function gistApiResponseToFileContents(
42 | gist: GistApiResponse,
43 | ): Promise {
44 | const result: FileContent[] = [];
45 |
46 | for (const filename in gist.files) {
47 | const gistFile = gist.files[filename];
48 |
49 | let binary: boolean;
50 | let contentString: string = "";
51 | let contentArray: Uint8Array = new Uint8Array(0);
52 |
53 | // Some Gist file entries are truncated. The API docs say it happens
54 | // when the files are over a megabyte. For these files, we need to fetch
55 | // the file directly, and we'll put the content in place.
56 | // https://docs.github.com/en/rest/gists/gists#truncation
57 | if (gistFile.truncated) {
58 | const reponse = await fetch(gistFile.raw_url);
59 | const contentBlob = await reponse.blob();
60 | contentArray = new Uint8Array(await contentBlob.arrayBuffer());
61 | // The gist API includes the 'type' field, but they are not always
62 | // helpful. 'type' can be "text/plain" for some binary files like sqlite
63 | // .db files.
64 | binary = isBinary(contentArray);
65 | if (!binary) {
66 | contentString = uint8ArrayToString(contentArray);
67 | }
68 | } else {
69 | contentString = window.atob(gistFile.content);
70 | binary = isBinary(contentString);
71 | if (binary) {
72 | contentArray = stringToUint8Array(contentString);
73 | }
74 | }
75 |
76 | if (binary) {
77 | result.push({
78 | name: gistFile.filename,
79 | type: "binary",
80 | content: contentArray,
81 | });
82 | } else {
83 | result.push({
84 | name: gistFile.filename,
85 | type: "text",
86 | content: contentString,
87 | });
88 | }
89 | }
90 |
91 | return result;
92 | }
93 |
--------------------------------------------------------------------------------
/src/Components/skull.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
50 |
--------------------------------------------------------------------------------
/src/Components/utils.ts:
--------------------------------------------------------------------------------
1 | export function asCssLengthUnit(value?: number | string): string | undefined {
2 | if (value === undefined) {
3 | return undefined;
4 | }
5 |
6 | if (typeof value === "string") {
7 | return value;
8 | }
9 |
10 | if (typeof value !== "number") {
11 | return undefined;
12 | }
13 |
14 | return `${value}px`;
15 | }
16 |
17 | export function minCssLengthUnit(
18 | x?: number | string,
19 | y?: number | string,
20 | ignoreAuto: boolean = true,
21 | ): string | undefined {
22 | x = asCssLengthUnit(x);
23 | y = asCssLengthUnit(y);
24 |
25 | if (ignoreAuto) {
26 | x = x === "auto" ? undefined : x;
27 | y = y === "auto" ? undefined : y;
28 | }
29 |
30 | if (x === undefined && y === undefined) {
31 | return undefined;
32 | }
33 |
34 | if (x && !y) {
35 | return x;
36 | }
37 |
38 | if (!x && y) {
39 | return y;
40 | }
41 |
42 | return `min(${x}, ${y})`;
43 | }
44 |
--------------------------------------------------------------------------------
/src/assets/shinylive-inject-socket.txt:
--------------------------------------------------------------------------------
1 | // src/messageportwebsocket.ts
2 | var MessagePortWebSocket = class extends EventTarget {
3 | constructor(port) {
4 | super();
5 | this.readyState = 0;
6 | this.addEventListener("open", (e) => {
7 | if (this.onopen) {
8 | this.onopen(e);
9 | }
10 | });
11 | this.addEventListener("message", (e) => {
12 | if (this.onmessage) {
13 | this.onmessage(e);
14 | }
15 | });
16 | this.addEventListener("error", (e) => {
17 | if (this.onerror) {
18 | this.onerror(e);
19 | }
20 | });
21 | this.addEventListener("close", (e) => {
22 | if (this.onclose) {
23 | this.onclose(e);
24 | }
25 | });
26 | this._port = port;
27 | port.addEventListener("message", this._onMessage.bind(this));
28 | port.start();
29 | }
30 | // Call on the server side of the connection, to tell the client that
31 | // the connection has been established.
32 | accept() {
33 | if (this.readyState !== 0) {
34 | return;
35 | }
36 | this.readyState = 1;
37 | this._port.postMessage({ type: "open" });
38 | }
39 | send(data) {
40 | if (this.readyState === 0) {
41 | throw new DOMException(
42 | "Can't send messages while WebSocket is in CONNECTING state",
43 | "InvalidStateError"
44 | );
45 | }
46 | if (this.readyState > 1) {
47 | return;
48 | }
49 | this._port.postMessage({ type: "message", value: { data } });
50 | }
51 | close(code, reason) {
52 | if (this.readyState > 1) {
53 | return;
54 | }
55 | this.readyState = 2;
56 | this._port.postMessage({ type: "close", value: { code, reason } });
57 | this.readyState = 3;
58 | this.dispatchEvent(new CloseEvent("close", { code, reason }));
59 | }
60 | _onMessage(e) {
61 | const event = e.data;
62 | switch (event.type) {
63 | case "open":
64 | if (this.readyState === 0) {
65 | this.readyState = 1;
66 | this.dispatchEvent(new Event("open"));
67 | return;
68 | }
69 | break;
70 | case "message":
71 | if (this.readyState === 1) {
72 | this.dispatchEvent(new MessageEvent("message", { ...event.value }));
73 | return;
74 | }
75 | break;
76 | case "close":
77 | if (this.readyState < 3) {
78 | this.readyState = 3;
79 | this.dispatchEvent(new CloseEvent("close", { ...event.value }));
80 | return;
81 | }
82 | break;
83 | }
84 | this._reportError(
85 | `Unexpected event '${event.type}' while in readyState ${this.readyState}`,
86 | 1002
87 | );
88 | }
89 | _reportError(message, code) {
90 | this.dispatchEvent(new ErrorEvent("error", { message }));
91 | if (typeof code === "number") {
92 | this.close(code, message);
93 | }
94 | }
95 | };
96 |
97 | // src/shinylive-inject-socket.ts
98 | window.Shiny.createSocket = function() {
99 | const channel = new MessageChannel();
100 | window.parent.postMessage(
101 | {
102 | type: "openChannel",
103 | // Infer app name from path: "/foo/app_abc123/"" => "app_abc123"
104 | appName: window.location.pathname.replace(
105 | new RegExp(".*/([^/]+)/$"),
106 | "$1"
107 | ),
108 | path: "/websocket/"
109 | },
110 | "*",
111 | [channel.port2]
112 | );
113 | return new MessagePortWebSocket(channel.port1);
114 | };
115 |
--------------------------------------------------------------------------------
/src/awaitable-queue.ts:
--------------------------------------------------------------------------------
1 | // A queue with an async dequeue operation
2 | export class AwaitableQueue {
3 | _buffer: Array = [];
4 | _promise: Promise;
5 | _resolve: () => void;
6 |
7 | constructor() {
8 | // make TS compiler happy
9 | this._resolve = null as any;
10 | this._promise = null as any;
11 |
12 | // Actually initialize _promise and _resolve
13 | this._notifyAll();
14 | }
15 |
16 | async _wait() {
17 | await this._promise;
18 | }
19 |
20 | _notifyAll() {
21 | if (this._resolve) {
22 | this._resolve();
23 | }
24 | this._promise = new Promise((resolve) => (this._resolve = resolve));
25 | }
26 |
27 | async dequeue(): Promise {
28 | // Must use a while-loop here, there might be multiple callers waiting to
29 | // deqeueue simultaneously
30 | while (this._buffer.length === 0) {
31 | await this._wait();
32 | }
33 | return this._buffer.shift()!;
34 | }
35 |
36 | enqueue(x: T): void {
37 | this._buffer.push(x);
38 | this._notifyAll();
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/src/examples.ts:
--------------------------------------------------------------------------------
1 | import type { AppEngine } from "./Components/App";
2 | import type { FileContent, FileContentJson } from "./Components/filecontent";
3 | import { FCJSONtoFC } from "./Components/filecontent";
4 |
5 | export type ExampleItemJson = {
6 | title: string;
7 | about?: string;
8 | files: FileContentJson[];
9 | };
10 |
11 | // For examples/index.json
12 | export type ExampleCategoryIndexJson = {
13 | engine: string;
14 | examples: {
15 | category: string;
16 | apps: string[];
17 | }[];
18 | };
19 |
20 | // For examples.json
21 | export type ExampleIndexJson = {
22 | engine: string;
23 | examples: ExampleCategoryJson[];
24 | };
25 |
26 | export type ExampleCategoryJson = {
27 | category: string;
28 | apps: ExampleItemJson[];
29 | };
30 |
31 | export type ExampleItem = {
32 | title: string;
33 | about: string | null;
34 | files: FileContent[];
35 | };
36 |
37 | export type ExampleCategory = {
38 | category: string;
39 | apps: ExampleItem[];
40 | };
41 |
42 | export type ExamplePosition = {
43 | categoryIndex: number;
44 | index: number;
45 | };
46 |
47 | let exampleCategories: ExampleCategory[] | null = null;
48 |
49 | export async function getExampleCategories(
50 | engine: AppEngine,
51 | ): Promise {
52 | if (exampleCategories) {
53 | return exampleCategories;
54 | }
55 |
56 | const response = await fetch("../shinylive/examples.json");
57 | const exampleIndexJson = (await response.json()) as ExampleIndexJson[];
58 |
59 | const exampleCategoriesJson = exampleIndexJson.find(
60 | (value) => value.engine === engine,
61 | );
62 |
63 | if (!exampleCategoriesJson) {
64 | throw new Error(`No examples found for app engine ${engine}`);
65 | }
66 |
67 | exampleCategories = exampleCategoriesJson.examples.map(
68 | exampleCategoryJsonToExampleCategory,
69 | );
70 |
71 | return exampleCategories;
72 | }
73 |
74 | export function findExampleByTitle(
75 | title: string,
76 | exampleCategories: ExampleCategory[],
77 | ): ExamplePosition | null {
78 | if (title === "") return null;
79 |
80 | // Convert everything to lowercase to make matching easier when typing by hand
81 | title = title.toLowerCase();
82 | for (
83 | let categoryIndex = 0;
84 | categoryIndex < exampleCategories.length;
85 | categoryIndex++
86 | ) {
87 | const examples = exampleCategories[categoryIndex].apps;
88 | for (let index = 0; index < examples.length; index++) {
89 | if (sanitizeTitleForUrl(examples[index].title) === title) {
90 | return { categoryIndex, index };
91 | }
92 | }
93 | }
94 |
95 | // Failed to find example
96 | return null;
97 | }
98 |
99 | export function sanitizeTitleForUrl(title: string) {
100 | return title
101 | .toLowerCase()
102 | .replace(/[\s/]/g, "-")
103 | .replace(/[^a-z0-9-]/g, "");
104 | }
105 |
106 | function exampleCategoryJsonToExampleCategory(
107 | x: ExampleCategoryJson,
108 | ): ExampleCategory {
109 | return {
110 | category: x.category,
111 | apps: x.apps.map(exampleItemJsonToExampleItem),
112 | };
113 | }
114 |
115 | function exampleItemJsonToExampleItem(x: ExampleItemJson): ExampleItem {
116 | return {
117 | title: x.title,
118 | about: x.about || null,
119 | files: x.files.map(FCJSONtoFC),
120 | };
121 | }
122 |
--------------------------------------------------------------------------------
/src/fonts/SourceSansPro-Regular.otf.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/posit-dev/shinylive/8acb41b0d4090308551e2f30dccb68fa6c9071a9/src/fonts/SourceSansPro-Regular.otf.woff2
--------------------------------------------------------------------------------
/src/hooks/useOnEscOrClickOutside.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | export function useOnEscOrClickOutside(
4 | ref: React.RefObject,
5 | handler: (event: KeyboardEvent | PointerEvent) => void
6 | ) {
7 | React.useEffect(() => {
8 | const listener = (event: KeyboardEvent | PointerEvent) => {
9 | if (event instanceof KeyboardEvent) {
10 | if (event.key === "Escape") {
11 | handler(event);
12 | }
13 | } else if (event instanceof PointerEvent) {
14 | // Do nothing if clicking ref's element or descendent elements
15 | if (!ref.current || ref.current.contains(event.target as Node)) {
16 | return;
17 | }
18 | handler(event);
19 | }
20 | };
21 |
22 | document.addEventListener("keydown", listener);
23 | document.addEventListener("pointerdown", listener);
24 |
25 | return () => {
26 | document.removeEventListener("keydown", listener);
27 | document.removeEventListener("pointerdown", listener);
28 | };
29 | }, [ref, handler]);
30 | }
31 |
--------------------------------------------------------------------------------
/src/hooks/useRunOnceOnMount.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | /**
4 | * Executes a callback function only once when the component mounts.
5 | *
6 | * @param {Function} callback - The callback function to be executed on mount.
7 | */
8 | export function useRunOnceOnMount(callback: () => void) {
9 | // This is needed to prevent the callback from being run twice -- in React
10 | // strict mode, a useEffect will run twice.
11 | const hasRun = React.useRef(false);
12 |
13 | React.useEffect(() => {
14 | if (!hasRun.current) {
15 | callback();
16 | hasRun.current = true;
17 | }
18 | // eslint-disable-next-line react-hooks/exhaustive-deps
19 | }, []);
20 | }
21 |
--------------------------------------------------------------------------------
/src/language-server/null-client.ts:
--------------------------------------------------------------------------------
1 | import {
2 | AbstractMessageReader,
3 | AbstractMessageWriter,
4 | createMessageConnection,
5 | } from "vscode-jsonrpc";
6 | import { LanguageServerClient, createUri } from "./client";
7 |
8 | let nullClient: NullLspClient | null = null;
9 |
10 | /**
11 | * This returns a NullClient object. If this is called multiple times, it
12 | * will return the same object each time.
13 | */
14 | export function ensureNullClient(): NullLspClient {
15 | if (!nullClient) {
16 | nullClient = new NullLspClient();
17 | }
18 | return nullClient;
19 | }
20 |
21 | export class NullMessageReader extends AbstractMessageReader {
22 | public listen() {
23 | return { dispose: () => {} };
24 | }
25 | }
26 |
27 | export class NullMessageWriter extends AbstractMessageWriter {
28 | public async write() {}
29 | public end(): void {}
30 | }
31 |
32 | /**
33 | * A "null" LSP client that listens for messages but does nothing.
34 | */
35 | export class NullLspClient extends LanguageServerClient {
36 | constructor() {
37 | const conn = createMessageConnection(
38 | new NullMessageReader(),
39 | new NullMessageWriter(),
40 | );
41 | conn.listen();
42 | super(conn, "en", createUri(""));
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/src/language-server/pyright-client.ts:
--------------------------------------------------------------------------------
1 | import { createMessageConnection } from "vscode-jsonrpc";
2 | import {
3 | BrowserMessageReader,
4 | BrowserMessageWriter,
5 | } from "vscode-jsonrpc/browser";
6 | import type * as LSP from "vscode-languageserver-protocol";
7 | import * as utils from "../utils";
8 | import { currentScriptDir } from "../utils";
9 | import { LanguageServerClient, createUri } from "./client";
10 |
11 | const workerScriptName = "pyright.worker.js";
12 |
13 | let pyrightClient: PyrightLspClient | null = null;
14 |
15 | /**
16 | * This returns a PyrightClient object. If this is called multiple times, it
17 | * will return the same object each time.
18 | */
19 | export function ensurePyrightClient(): PyrightLspClient {
20 | if (!pyrightClient) {
21 | pyrightClient = new PyrightLspClient();
22 | }
23 | return pyrightClient;
24 | }
25 |
26 | /**
27 | * The in-browser Pyright Language Server needs a few extra notification
28 | * messages over and above the standard Language Server Protocol. This class
29 | * sends those messages.
30 | */
31 | export class PyrightLspClient extends LanguageServerClient {
32 | constructor() {
33 | const workerScript =
34 | utils.currentScriptDir() + `/pyright/${workerScriptName}`;
35 |
36 | const foreground = new Worker(workerScript, {
37 | name: "pyright-foreground",
38 | });
39 | const connection = createMessageConnection(
40 | new BrowserMessageReader(foreground),
41 | new BrowserMessageWriter(foreground),
42 | );
43 | // TODO: Add a way to shut down background thread
44 | const workers: Worker[] = [foreground];
45 | connection.onDispose(() => {
46 | workers.forEach((w) => w.terminate());
47 | });
48 |
49 | connection.listen();
50 |
51 | super(connection, "en", createUri(""));
52 | }
53 |
54 | public override async createFile(
55 | filename: string,
56 | content: string,
57 | ): Promise {
58 | const params: LSP.CreateFile = {
59 | uri: createUri(filename),
60 | kind: "create",
61 | };
62 | await this.connection.sendNotification("$/createFile", params);
63 | await super.createFile(filename, content);
64 | }
65 |
66 | public override async deleteFile(filename: string): Promise {
67 | const params: LSP.DeleteFile = {
68 | uri: createUri(filename),
69 | kind: "delete",
70 | };
71 | await this.connection.sendNotification("$/deleteFile", params);
72 | await super.deleteFile(filename);
73 | }
74 |
75 | /**
76 | * This uses fetch() instead of import() so that esbuild will not inline the
77 | * entire JSON file into the .js bundle.
78 | */
79 | override async getInitializationOptions(): Promise {
80 | const response = await fetch(
81 | currentScriptDir() + "/pyright/typeshed.en.json",
82 | );
83 | const typeshed = await response.json();
84 |
85 | return {
86 | files: typeshed,
87 | };
88 | }
89 | }
90 |
--------------------------------------------------------------------------------
/src/load-shinylive-sw.ts:
--------------------------------------------------------------------------------
1 | import { currentScriptDir, dirname } from "./utils";
2 |
3 | const localhostNames = ["localhost", "127.0.0.1", "[::1]"];
4 |
5 | if (
6 | window.location.protocol !== "https:" &&
7 | !localhostNames.includes(window.location.hostname)
8 | ) {
9 | const errorMessage =
10 | "Shinylive uses a Service Worker, which requires either a connection to localhost, or a connection via https.";
11 | document.body.innerText = errorMessage;
12 | throw Error(errorMessage);
13 | }
14 |
15 | // Figure out path to shinylive-sw.js. This can be provided with a tag:
16 | //
17 | // In that case, the path is relative to the current _page_, not this script.
18 | //
19 | // If that meta tag isn't present, assume shinylive-sw.js is in the parent of
20 | // this script's directory.
21 | let serviceWorkerDir: string;
22 | const shinyliveMetaTag = document.querySelector(
23 | 'meta[name="shinylive:serviceworker_dir"]'
24 | );
25 | if (shinyliveMetaTag !== null) {
26 | serviceWorkerDir = (shinyliveMetaTag as HTMLMetaElement).content;
27 | } else {
28 | serviceWorkerDir = dirname(currentScriptDir());
29 | }
30 | // Remove trailing slash, if present.
31 | serviceWorkerDir = serviceWorkerDir.replace(/\/$/, "");
32 |
33 | const serviceWorkerPath = serviceWorkerDir + "/shinylive-sw.js";
34 |
35 | // Start the service worker as soon as possible, to maximize the
36 | // resources it will be able to cache on the first run.
37 | if ("serviceWorker" in navigator) {
38 | navigator.serviceWorker
39 | .register(serviceWorkerPath, { type: "module" })
40 | .then(() => console.log("Service Worker registered"))
41 | .catch(() => console.log("Service Worker registration failed"));
42 |
43 | // eslint-disable-next-line @typescript-eslint/no-floating-promises
44 | navigator.serviceWorker.ready.then(() => {
45 | if (!navigator.serviceWorker.controller) {
46 | // For Shift+Reload case; navigator.serviceWorker.controller will
47 | // never appear until a regular (not Shift+Reload) page load.
48 | window.location.reload();
49 | }
50 | });
51 | }
52 |
--------------------------------------------------------------------------------
/src/lzstring-worker.ts:
--------------------------------------------------------------------------------
1 | // LZString in a Web Worker
2 |
3 | import LZString from "lz-string";
4 |
5 | self.onmessage = function (e: MessageEvent): void {
6 | const msg = e.data as RequestMessage;
7 | const messagePort: ResponseMesssagePort = e.ports[0];
8 |
9 | let result: string;
10 |
11 | if (msg.type === "encode") {
12 | result = LZString.compressToEncodedURIComponent(msg.value);
13 | } else if (msg.type === "decode") {
14 | result = LZString.decompressFromEncodedURIComponent(msg.value);
15 | } else {
16 | throw new Error(`Unknown request message type: ${(msg as any).type}`);
17 | }
18 |
19 | messagePort.postMessage({ value: result });
20 | };
21 |
22 | interface ResponseMesssagePort extends Omit {
23 | postMessage(msg: ResponseMessage): void;
24 | }
25 |
26 | export interface RequestMessageEncode {
27 | type: "encode";
28 | value: string;
29 | }
30 |
31 | export interface RequestMessageDecode {
32 | type: "decode";
33 | value: string;
34 | }
35 |
36 | export type RequestMessage = RequestMessageEncode | RequestMessageDecode;
37 |
38 | export interface ResponseMessage {
39 | value: string;
40 | }
41 |
--------------------------------------------------------------------------------
/src/postable-error.ts:
--------------------------------------------------------------------------------
1 | // Error objects which need to be sent via postMessage() are turned into one of
2 | // these objects. This is because on Safari, `structuredClone(e)` throws an
3 | // error, even for a bare Error object, as in `structuredClone(new Error())`. I
4 | // think this is bug in Safari because Errors should be cloneable.
5 | // https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm
6 | // To work around this, instead of sending the Error object directly, we'll
7 | // convert it to this plain object and send that.
8 | //
9 | // If Safari fixes this issue, we'll be able to remove all of this stuff, and
10 | // simply post the Error object directly.
11 | export type PostableErrorObject = {
12 | message: string;
13 | name: string;
14 | stack?: string;
15 | };
16 |
17 | export function errorToPostableErrorObject(
18 | e: Error | any
19 | ): PostableErrorObject {
20 | const errObj: PostableErrorObject = {
21 | message: "An unknown error occured",
22 | name: e.name,
23 | };
24 |
25 | if (!(e instanceof Error)) {
26 | return errObj;
27 | }
28 |
29 | errObj.message = e.message;
30 |
31 | if (e.stack) {
32 | errObj.stack = e.stack;
33 | }
34 |
35 | return errObj;
36 | }
37 |
38 | export function postableErrorObjectToError(
39 | errObj: PostableErrorObject | any
40 | ): Error {
41 | // In the future, it's probably better to use `Object.hasOwn()` instead of
42 | // `in`, but at the time of this writing (2022-07), it is very new and we
43 | // can't expect all browsers to support it yet.
44 | if ("message" in errObj && "name" in errObj) {
45 | // This is a PostableErrorObject.
46 | const err = new Error(errObj.message);
47 | err.name = errObj.name;
48 | if (errObj.stack !== undefined) {
49 | err.stack = errObj.stack;
50 | }
51 | return err;
52 | } else {
53 | return new Error("An unknown error occured");
54 | }
55 | }
56 |
--------------------------------------------------------------------------------
/src/pyright/PYRIGHT_LICENSE.txt:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Pyright - A static type checker for the Python language
4 | Copyright (c) Microsoft Corporation. All rights reserved.
5 |
6 | Permission is hereby granted, free of charge, to any person obtaining a copy
7 | of this software and associated documentation files (the "Software"), to deal
8 | in the Software without restriction, including without limitation the rights
9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
10 | copies of the Software, and to permit persons to whom the Software is
11 | furnished to do so, subject to the following conditions:
12 |
13 | The above copyright notice and this permission notice shall be included in all
14 | copies or substantial portions of the Software.
15 |
16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
22 | SOFTWARE
23 |
--------------------------------------------------------------------------------
/src/pyright/README.md:
--------------------------------------------------------------------------------
1 | This is a special build of Pyright that can run in a Web Worker in a browser.
2 |
3 | Built from sources at: https://github.com/posit-dev/pyright/ from branch `pyright-browser`
4 | Commit 4a9135964b680d0a2d5120f4b0910b9a4cffc807
5 |
6 | ## Local testing with a local copy of pyright
7 |
8 | In order to test a local copy of shinylive with a local copy of pyright, do the following:
9 |
10 | - Build shinylive
11 | - Build pyright, as described in https://github.com/posit-dev/pyright/blob/pyright-browser/THIS_FORK.md
12 | - In the shinylive directory, do the following (and change `/path/to/pyright` as appropriate):
13 |
14 | ```
15 | cd build/shinylive/pyright
16 | rm pyright.worker.js pyright.worker.js.map
17 | (
18 | PYRIGHTPATH=/path/to/pyright
19 | ln -s $PYRIGHTPATH/pyright.worker.js
20 | ln -s $PYRIGHTPATH/pyright.worker.js.map
21 | ln -s $PYRIGHTPATH/pyright-internal
22 | ln -s $PYRIGHTPATH/browser-pyright pyright
23 | )
24 | ```
25 |
26 | - Run `make serve`
27 |
28 |
29 | The .js symlink will make it so that the web browser will load the copy of pyright that is built from the repo, and .js.map and the directory symlinks will make it so the source .ts files will show in the browser's JS debugger.
30 |
--------------------------------------------------------------------------------
/src/run-python-blocks.ts:
--------------------------------------------------------------------------------
1 | import type { AppEngine, AppMode } from "./Components/App";
2 | import type { Component } from "./parse-codeblock";
3 | import { parseCodeBlock } from "./parse-codeblock";
4 | // @ts-expect-error: This import is _not_ bundled. It would be nice to be able
5 | // import type information from ./Components/App (which gets compiled to
6 | // shinylive.js), but I haven't figured out how to make it do that and do this
7 | // (non-bundled) import.
8 | import { runApp } from "./shinylive.js";
9 |
10 | // Select all of the DOM elements that match the combined selector. It's
11 | // important that they're selected in the order they appear in the page, so that
12 | // we execute them in the correct order.
13 | const blocks: NodeListOf = document.querySelectorAll(
14 | ".shinylive-python, .shinylive-r"
15 | );
16 |
17 | blocks.forEach((block) => {
18 | const container = document.createElement("div");
19 | container.className = "shinylive-wrapper";
20 |
21 | const engine: AppEngine = block.classList.contains("shinylive-r")
22 | ? "r"
23 | : "python";
24 |
25 | // Copy over explicitly-set style properties.
26 | container.style.cssText = block.style.cssText;
27 |
28 | block.parentNode!.replaceChild(container, block);
29 |
30 | const { files, quartoArgs } = parseCodeBlock(block.innerText, engine);
31 |
32 | const appMode = convertComponentArrayToAppMode(quartoArgs.components);
33 |
34 | const opts = { startFiles: files, ...quartoArgs };
35 | runApp(container, appMode, opts, engine);
36 | });
37 |
38 | /**
39 | * Convert an array of components, like ["editor", "viewer"] to an AppMode
40 | * string.
41 | */
42 | function convertComponentArrayToAppMode(
43 | components: Component[] | Component
44 | ): AppMode {
45 | if (typeof components === "string") {
46 | components = [components];
47 | }
48 | const c_string = components.sort().join(",");
49 |
50 | if (c_string === "editor,viewer") {
51 | return "editor-viewer";
52 | } else if (c_string === "editor,terminal,viewer") {
53 | return "editor-terminal-viewer";
54 | } else if (c_string === "editor,terminal") {
55 | return "editor-terminal";
56 | } else if (c_string === "cell,editor") {
57 | return "editor-cell";
58 | } else if (c_string === "viewer") {
59 | return "viewer";
60 | } else {
61 | throw new Error(
62 | "Unknown shinylive component combination: " + JSON.stringify(components)
63 | );
64 | }
65 | }
66 |
--------------------------------------------------------------------------------
/src/scripts/codeblock-to-json.ts:
--------------------------------------------------------------------------------
1 | // This script is meant to be executed with Deno, not Node.js!
2 | //
3 | // It converts a file containing codeblock content, to a JSON file containing an
4 | // array of FileContent objects. Reads from stdin and writes to stdout.
5 | //
6 | // Usage:
7 | // deno run codeblock-to-json.ts
8 | //
9 | // Deno can run Typescript directly, but we are still running it through esbuild
10 | // to generate JS because we want to bundle other files into it. If we didn't
11 | // bundle the files, we would need to do some weird stuff with paths for the
12 | // import to work at run time, because the output path structure is different.
13 | import { readLines } from "https://deno.land/std/io/mod.ts";
14 |
15 | import type { AppEngine } from "../Components/App";
16 | import { parseCodeBlock } from "../parse-codeblock";
17 |
18 | const { args } = Deno;
19 |
20 | const lines: string[] = [];
21 | for await (const line of readLines(Deno.stdin)) {
22 | lines.push(line);
23 | }
24 | // Default to python to support legacy codeblocks with an old version of shinylive quarto extension
25 | const engine: AppEngine = args.length > 0 && args[0] == "r" ? "r" : "python";
26 |
27 | const content = parseCodeBlock(lines, engine);
28 |
29 | await Deno.stdout.write(new TextEncoder().encode(JSON.stringify(content)));
30 |
--------------------------------------------------------------------------------
/src/shinylive-inject-socket.ts:
--------------------------------------------------------------------------------
1 | // Note that this file gets compiled to ./shinylive-inject-socket.txt. This is a
2 | // JavaScript file which in turn gets imported into the service worker as a
3 | // string, and gets served to Shinylive applications when they request that
4 | // file.
5 | //
6 | // The reason for doing this is so that only the shinylive-sw.js file needs to
7 | // live at the top level, instead of both that file and shinylive-sw.js.
8 | //
9 | // If you change this file (or its dependencies), then you may need to run the
10 | // build step twice: once to compile this file to the output .txt file, and then
11 | // one more time to have it be incorporated into shinylive-sw.js.
12 | import { MessagePortWebSocket } from "./messageportwebsocket";
13 |
14 | export {};
15 |
16 | // Create an object that looks like a WebSocket which Shiny.js will use
17 | // to communicate to the Python backend.
18 | (window as any).Shiny.createSocket = function () {
19 | const channel = new MessageChannel();
20 | window.parent.postMessage(
21 | {
22 | type: "openChannel",
23 | // Infer app name from path: "/foo/app_abc123/"" => "app_abc123"
24 | appName: window.location.pathname.replace(
25 | new RegExp(".*/([^/]+)/$"),
26 | "$1"
27 | ),
28 | path: "/websocket/",
29 | },
30 | "*",
31 | [channel.port2]
32 | );
33 | return new MessagePortWebSocket(channel.port1);
34 | };
35 |
--------------------------------------------------------------------------------
/src/style-resets.css:
--------------------------------------------------------------------------------
1 | /* Taken from https://www.joshwcomeau.com/css/custom-css-reset/ */
2 |
3 | /*
4 | 1. Use a more-intuitive box-sizing model.
5 | */
6 | *,
7 | *::before,
8 | *::after {
9 | box-sizing: border-box;
10 | }
11 | /*
12 | 2. Remove default margin
13 | */
14 | * {
15 | margin: 0;
16 | }
17 | /*
18 | 3. Allow percentage-based heights in the application
19 | */
20 | html,
21 | body {
22 | height: 100%;
23 | }
24 | /*
25 | Typographic tweaks!
26 | 4. Add accessible line-height
27 | 5. Improve text rendering
28 | */
29 | body {
30 | line-height: 1.5;
31 | -webkit-font-smoothing: antialiased;
32 | }
33 | /*
34 | 6. Improve media defaults
35 | */
36 | img,
37 | picture,
38 | video,
39 | canvas,
40 | svg {
41 | display: block;
42 | max-width: 100%;
43 | }
44 | /*
45 | 7. Remove built-in form typography styles
46 | */
47 | input,
48 | button,
49 | textarea,
50 | select {
51 | font: inherit;
52 | }
53 | /*
54 | 8. Avoid text overflows
55 | */
56 | p,
57 | h1,
58 | h2,
59 | h3,
60 | h4,
61 | h5,
62 | h6 {
63 | overflow-wrap: break-word;
64 | }
65 | /*
66 | 9. Create a root stacking context
67 | */
68 | #root,
69 | #__next {
70 | isolation: isolate;
71 | }
72 |
--------------------------------------------------------------------------------
/src/types/custom.d.ts:
--------------------------------------------------------------------------------
1 | // This seems to be necessary so that the TS compiler doesn't complain about
2 | // importing svg files.
3 | declare module "*.svg" {
4 | import type * as React from "react";
5 |
6 | export const ReactComponent: React.FunctionComponent<
7 | React.SVGProps & { title?: string }
8 | >;
9 |
10 | const src: string;
11 | export default src;
12 | }
13 |
14 | // This is so the TS compiler doesn't complain about importing text files.
15 | declare module "*.txt" {
16 | const content: string;
17 | export default content;
18 | }
19 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "noEmit": true,
4 | "jsx": "react-jsx",
5 | "target": "es2020",
6 | "module": "es2020",
7 | "strict": true,
8 | "isolatedModules": true,
9 | "moduleResolution": "node",
10 | "esModuleInterop": true,
11 | "skipLibCheck": true,
12 | "resolveJsonModule": true,
13 | "types": [],
14 | "forceConsistentCasingInFileNames": true
15 | },
16 | "include": [
17 | "src",
18 | "scripts"
19 | ],
20 | "exclude": [
21 | "src/pyodide",
22 | "src/pyright",
23 | "**/*.test.tsx",
24 | "node_modules"
25 | ],
26 | "$schema": "https://json.schemastore.org/tsconfig",
27 | "display": "Recommended"
28 | }
29 |
--------------------------------------------------------------------------------