- +

@@ -279,11 +260,10 @@ export const EmptyToBlocksTransition: Story = { export const RespectUserLayout: Story = { name: 'Respect user layout', render: (args) => { - const { options: version } = args; - const options = getOptionsFromVersion(version as string); + const { version } = args; return ( - - + + = { + title: 'stories/React/MakeCodeFrame', + component: MakeCodeFrame, + argTypes: { + version: { + options: ['default', 'beta'], + defaultValue: undefined, + name: 'version', + control: { type: 'radio' }, + }, + }, +}; + +export default meta; +type Story = StoryObj; + +const MakeCodeEditorWithControls = ( + props: Omit +) => { + const savedProjects = useRef>(new Map()); + const ref = useRef(null); + const initialProjects = useCallback(async () => { + if (savedProjects.current.size === 0) { + // Maybe we can switch to using newProject instead? + return [defaultMakeCodeProject]; + } + return [...savedProjects.current.values()]; + }, []); + return ( + <> + + console.log('editorContentLoaded', e)} + onWorkspaceLoaded={(e) => console.log('workspaceLoaded', e)} + onWorkspaceSync={(e) => console.log('workspaceSync', e)} + onWorkspaceReset={(e) => console.log('workspaceReset', e)} + onWorkspaceEvent={(e) => console.log('workspaceEvent', e)} + onWorkspaceSave={(e) => { + savedProjects.current?.set(e.project!.header!.id, e.project); + console.log(savedProjects.current); + }} + onTutorialEvent={(e) => console.log('tutorialEvent', e)} + {...props} + /> + + ); +}; + +export const MakeCodeEditorWithControlsStory: Story = { + name: 'MakeCode Editor with controls', + args: { + version: 'default', + }, + render: (args) => { + const { version } = args; + return ( + + + + ); + }, +}; + +export const MakeCodeEditorControllerAppModeStory: Story = { + name: 'MakeCode Editor with controller=2 mode', + args: { + version: 'default', + }, + render: (args) => { + const { version } = args; + return ( + + console.log('download', download)} + onSave={(save) => console.log('save', save)} + onBack={() => console.log('back')} + onBackLongPress={() => console.log('back long')} + /> + + ); + }, +}; diff --git a/src/stories/vanilla/makecode-frame-driver.stories.tsx b/src/stories/vanilla/makecode-frame-driver.stories.tsx new file mode 100644 index 0000000..1dac623 --- /dev/null +++ b/src/stories/vanilla/makecode-frame-driver.stories.tsx @@ -0,0 +1,107 @@ +import { Meta, StoryObj } from '@storybook/react'; +import { useRef } from 'react'; +import { defaultMakeCodeProject } from '../../vanilla/examples.js'; +import { + createMakeCodeURL, + MakeCodeFrameDriver, + Options, +} from '../../vanilla/makecode-frame-driver.js'; +import { MakeCodeProject } from '../../vanilla/pxt.js'; +import MakeCodeToolbar from '../MakeCodeToolbar.js'; +import StoryWrapper from '../StoryWrapper.js'; + +interface StoryArgs { + options?: { + version?: string; + lang?: string; + controller?: 1 | 2; + queryParams?: Record; + }; + project?: MakeCodeProject; + callbacks?: Partial; +} + +const meta: Meta = { + title: 'stories/VanillaJS/makeCodeFrameDriver', +}; + +export default meta; + +type Story = StoryObj; + +const renderEditor = (args: StoryArgs) => { + const savedProjects = useRef>(new Map()); + const ref = useRef(null); + const cbRef = (div: HTMLElement | null) => { + if (!div) { + return; + } + // Create an iframe element. + const iframe = document.createElement('iframe'); + iframe.allow = 'usb; autoplay; camera; microphone;'; + iframe.src = createMakeCodeURL( + 'https://makecode.microbit.org', + args.options?.version === 'default' ? undefined : args.options?.version, + args.options?.lang, + args.options?.controller ?? 1, + args.options?.queryParams + ); + iframe.width = '100%'; + iframe.height = '100%'; + div.appendChild(iframe); + + const savedProjects: Map = new Map(); + + // Create and initialise an instance of MakeCodeFrameDriver. + ref.current = new MakeCodeFrameDriver( + { + initialProjects: async () => (args.project ? [args.project] : []), + onEditorContentLoaded: (e) => console.log('editorContentLoaded', e), + onWorkspaceLoaded: (e) => console.log('workspaceLoaded', e), + onWorkspaceSync: (e) => console.log('workspaceSync', e), + onWorkspaceReset: (e) => console.log('workspaceReset', e), + onWorkspaceEvent: (e) => console.log('workspaceEvent', e), + onWorkspaceSave: (e) => { + const headerId = e.project!.header!.id; + savedProjects.set(headerId, e.project); + console.log(savedProjects); + }, + onTutorialEvent: (e) => console.log('tutorialEvent', e), + ...(args.callbacks ?? {}), + }, + () => iframe + ); + + ref.current.initialize(); + }; + + return ( + + +

+ + ); +}; + +export const MakeCodeEditorWithControlsStory: Story = { + name: 'MakeCode Editor with controls', + render: renderEditor, + args: { + options: { version: 'default', queryParams: { hideMenu: '' } }, + project: defaultMakeCodeProject, + }, +}; + +export const MakeCodeEditorControllerAppModeStory: Story = { + name: 'MakeCode Editor with controller=2 mode', + render: renderEditor, + args: { + options: { version: 'default', controller: 2 }, + callbacks: { + onDownload: (download) => console.log('download', download), + onSave: (save) => console.log('save', save), + onBack: () => console.log('back'), + onBackLongPress: () => console.log('back long'), + }, + }, +}; diff --git a/src/stories/vanilla/makecode-render-blocks.stories.tsx b/src/stories/vanilla/makecode-render-blocks.stories.tsx new file mode 100644 index 0000000..03bdd54 --- /dev/null +++ b/src/stories/vanilla/makecode-render-blocks.stories.tsx @@ -0,0 +1,94 @@ +import { Meta, StoryObj } from '@storybook/react'; +import { + createMakeCodeRenderBlocks, + MakeCodeRenderBlocksOptions, +} from '../../vanilla/makecode-render-blocks.js'; +import { + initialProject, + project, + projectWithCustomBlock, + projectWithDatalogging, + projectWithExtensionBlock, + projectWithLayout, + projectWithMelody, + projectWithTwoExtensions, +} from '../fixtures.js'; +import { MakeCodeProject } from '../../vanilla/pxt.js'; +import StoryWrapper from '../StoryWrapper.js'; + +interface StoryArgs { + options: MakeCodeRenderBlocksOptions | undefined; + project: MakeCodeProject; +} + +const meta: Meta = { + title: 'stories/VanillaJS/createMakeCodeRenderBlocks', +}; + +export default meta; + +type Story = StoryObj; + +const renderBlocks = (args: StoryArgs) => { + const cbRef = (e: HTMLElement | null) => { + if (!e) { + return; + } + const renderer = createMakeCodeRenderBlocks(args.options ?? {}); + renderer.initialize(); + renderer.renderBlocks({ code: args.project }).then((r) => { + if (r.svg) { + e.innerHTML = ` +

+ ${r.svg} +

+ `; + } + }); + }; + return ( + +

+ + ); +}; + +export const Simple: Story = { + render: renderBlocks, + args: { project: project }, +}; + +export const XML: Story = { + render: renderBlocks, + args: { project: projectWithLayout }, +}; + +export const Melody: Story = { + render: renderBlocks, + args: { project: projectWithMelody }, +}; + +export const ExtensionBlockSingle: Story = { + render: renderBlocks, + args: { project: projectWithExtensionBlock }, +}; + +export const ExtensionBlockTwo: Story = { + render: renderBlocks, + args: { project: projectWithTwoExtensions }, +}; + +export const ExtensionBlockDatalogging: Story = { + render: renderBlocks, + args: { project: projectWithDatalogging }, +}; + +export const CustomBlock: Story = { + render: renderBlocks, + args: { project: projectWithCustomBlock }, +}; + +export const InitialBlankProject: Story = { + render: renderBlocks, + args: { project: initialProject }, +}; diff --git a/src/vanilla/examples.ts b/src/vanilla/examples.ts index 0bb4216..9f5bf1d 100644 --- a/src/vanilla/examples.ts +++ b/src/vanilla/examples.ts @@ -1,6 +1,6 @@ -import { Project } from './pxt.js'; +import { MakeCodeProject } from './pxt.js'; -export const defaultMakeCodeProject: Project = { +export const defaultMakeCodeProject: MakeCodeProject = { text: { 'main.blocks': '\n \n', @@ -11,7 +11,7 @@ export const defaultMakeCodeProject: Project = { }, }; -export const emptyMakeCodeProject: Project = { +export const emptyMakeCodeProject: MakeCodeProject = { text: { 'main.blocks': '\n \n', diff --git a/src/vanilla/index.ts b/src/vanilla/index.ts index c1756f1..588d0bb 100644 --- a/src/vanilla/index.ts +++ b/src/vanilla/index.ts @@ -6,13 +6,20 @@ export { export { MakeCodeFrameDriver, createMakeCodeURL, + type EditorShareOptions, type Options, } from '../vanilla/makecode-frame-driver.js'; export { BlockLayout } from '../vanilla/pxt.js'; export type { + CodeCard, + CodeCardAction, + CodeCardEditorType, + CodeCardType, + CodeValidationConfig, CreateEvent, + DependencyMap, EditorContentLoadedRequest, EditorEvent, EditorMessageTutorialCompletedEventRequest, @@ -22,20 +29,48 @@ export type { EditorMessageTutorialProgressEventRequest, EditorWorkspaceSaveRequest, EditorWorkspaceSyncRequest, + FilterState, + Header, ImportExternalProjectOptions, ImportFileOptions, ImportProjectOptions, InfoMessage, LanguageRestriction, - Project, + PackageConfig, + PackageExtension, + MakeCodeProject, ProjectCreationOptions, ProjectFilters, + ProjectTemplate, RenderBlocksOptions, RenderByBlockIdOptions, RenderXmlOptions, + ScriptText, ShareResult, + SnippetAnswerTypes, + SnippetConfig, + SnippetGoToOptions, + SnippetParameters, + SnippetQuestionInput, + SnippetQuestions, StartActivityOptions, + TargetVersions, ToolboxBlockDefinition, ToolboxCategoryDefinition, + TutorialActivityInfo, + TutorialBlockConfig, + TutorialMetadata, + TutorialOptions, + TutorialStepInfo, UIEvent, + YottaConfig, } from '../vanilla/pxt.js'; + +export { createMakeCodeRenderBlocks } from '../vanilla/makecode-render-blocks.js'; + +export type { + MakeCodeRenderBlocksOptions, + MakeCodeRenderBlocksReturn, + RenderBlocksResponse, + RenderBlocksRequest, +} from '../vanilla/makecode-render-blocks.js'; diff --git a/src/vanilla/makecode-frame-driver.ts b/src/vanilla/makecode-frame-driver.ts index ba317eb..6fd7e57 100644 --- a/src/vanilla/makecode-frame-driver.ts +++ b/src/vanilla/makecode-frame-driver.ts @@ -29,7 +29,7 @@ import { ImportProjectOptions, InfoMessage, LanguageRestriction, - Project, + MakeCodeProject, ProjectCreationOptions, ProjectFilters, RenderBlocksOptions, @@ -50,7 +50,7 @@ type EditorMessageRequestUnion = | EditorMessageNewProjectRequest | EditorMessageRequest; -interface EditorShareOptions { +export interface EditorShareOptions { headerId: string; projectName: string; } @@ -64,7 +64,7 @@ export interface Options { * The projects will receive updates via `onWorkspaceSave` and should be stored keyed by header * id. */ - initialProjects: () => Promise; + initialProjects: () => Promise; /** * Set this to a value representing your app. @@ -297,6 +297,7 @@ export class MakeCodeFrameDriver { // Native app oriented event that doesn't have a 'type' field. switch (data.cmd) { case 'backtap': + // MakeCode seems to send this twice for a single click but there's little we can do here. return this.options.onBack?.(); case 'backpress': return this.options.onBackLongPress?.(); diff --git a/src/vanilla/makecode-render-blocks.ts b/src/vanilla/makecode-render-blocks.ts index 7fb09f1..a868694 100644 --- a/src/vanilla/makecode-render-blocks.ts +++ b/src/vanilla/makecode-render-blocks.ts @@ -2,7 +2,7 @@ * MakeCode handling that does not depend on React. */ -import { BlockLayout, Project } from './pxt.js'; +import { BlockLayout, MakeCodeProject } from './pxt.js'; const disposedMessage = 'Disposed'; const makecodeFailedToLoadMessage = 'Failed to load MakeCode to render blocks.'; @@ -22,7 +22,7 @@ export interface MakeCodeRenderBlocksReturn { } export interface RenderBlocksRequest { - code: string | Project; + code: string | MakeCodeProject; options?: { packageId?: string; package?: string; @@ -68,7 +68,7 @@ interface RenderBlocksResponseMessage { type RequestInputType = 'text' | 'blocks'; interface RenderBlocksRequestResponse { - input: Project | string; + input: MakeCodeProject | string; sent: boolean; type: RequestInputType; req: RenderBlocksRequestMessage; @@ -80,7 +80,7 @@ interface RenderBlocksRequestResponse { type PendingRequests = { [id: string]: RenderBlocksRequestResponse }; -const createMakeCodeRenderBlocks = ( +export const createMakeCodeRenderBlocks = ( options: MakeCodeRenderBlocksOptions ): MakeCodeRenderBlocksReturn => { const defaultedOptions: MakeCodeRenderBlocksOptions = { @@ -129,7 +129,7 @@ const createMakeCodeRenderBlocks = ( }; const findBestCode = ( - code: string | Project, + code: string | MakeCodeProject, ignoreBlocks?: boolean ): { type: RequestInputType; code: string } => { if (typeof code === 'string') { @@ -311,5 +311,3 @@ function createIframe( document.body.appendChild(f); return f; } - -export default createMakeCodeRenderBlocks; diff --git a/src/vanilla/pxt.ts b/src/vanilla/pxt.ts index b441605..93953d2 100644 --- a/src/vanilla/pxt.ts +++ b/src/vanilla/pxt.ts @@ -19,15 +19,14 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ -export interface JsonScriptMeta { - blocksWidth?: number; - blocksHeight?: number; - versions?: TargetVersions; -} - export interface InstallHeader { name: string; // script name, should always be in sync with pxt.json name - meta: JsonScriptMeta; // script meta data + meta: { + // json script meta data + blocksWidth?: number; + blocksHeight?: number; + versions?: TargetVersions; + }; editor: string; // editor that we're in board?: string; // name of the package that contains the board.json info temporary?: boolean; // don't serialize project @@ -37,7 +36,10 @@ export interface InstallHeader { targetVersion: string; pubId: string; // for published scripts pubCurrent: boolean; // is this exactly pubId, or just based on it - pubVersions?: PublishVersion[]; + pubVersions?: { + id: string; + type: 'snapshot' | 'permalink'; + }[]; pubPermalink?: string; // permanent (persistent) share ID anonymousSharePreference?: boolean; // if true, default to sharing anonymously even when logged in githubId?: string; @@ -46,7 +48,12 @@ export interface InstallHeader { // in progress tutorial if any tutorial?: TutorialOptions; // completed tutorial info if any - tutorialCompleted?: TutorialCompletionInfo; + tutorialCompleted?: { + // id of the tutorial + id: string; + // number of steps completed + steps: number; + }; // workspace guid of the extension under test extensionUnderTest?: string; // id of cloud user who created this project @@ -77,14 +84,9 @@ export interface Header extends InstallHeader { _rev: string; // used for idb / pouchdb revision tracking } -interface PublishVersion { - id: string; - type: 'snapshot' | 'permalink'; -} - export type ScriptText = Record; -export interface Project { +export interface MakeCodeProject { header?: Header; text?: ScriptText; } @@ -331,7 +333,7 @@ export interface EditorWorkspaceSyncResponse extends EditorMessageResponse { /* * Full list of project, required for init */ - projects: Project[]; + projects: MakeCodeProject[]; // (optional) filtering argument editor?: EditorSyncState; // (optional) controller id, used for determining what the parent controller is @@ -343,12 +345,12 @@ export interface EditorWorkspaceSaveRequest extends EditorMessageRequest { /* * Modified project */ - project: Project; + project: MakeCodeProject; } export interface ImportProjectOptions { // project to load - project: Project; + project: MakeCodeProject; // (optional) filtering argument filters?: ProjectFilters; searchBar?: boolean; @@ -362,7 +364,7 @@ export interface EditorMessageImportProjectRequest export interface ImportExternalProjectOptions { // project to load - project: Project; + project: MakeCodeProject; } export interface EditorMessageImportExternalProjectRequest @@ -603,7 +605,7 @@ export interface EditorMessageGetToolboxCategoriesResponse { categories: ToolboxCategoryDefinition[]; } -interface ProjectTemplate { +export interface ProjectTemplate { id: string; config: PackageConfig; files: Record; @@ -809,17 +811,7 @@ export type CloudStatus = | 'conflict' | 'localEdits'; -interface TargetVersions { - target: string; - targetId?: string; - targetWebsite?: string; - pxt?: string; - tag?: string; - branch?: string; - commits?: string; // URL -} - -type CodeCardType = +export type CodeCardType = | 'file' | 'example' | 'codeExample' @@ -832,13 +824,13 @@ type CodeCardType = | 'forumExample' | 'sharedExample' | 'link'; -type CodeCardEditorType = 'blocks' | 'js' | 'py'; +export type CodeCardEditorType = 'blocks' | 'js' | 'py'; -interface Map { +export interface DependencyMap { [index: string]: T; } -interface TargetVersions { +export interface TargetVersions { target: string; targetId?: string; targetWebsite?: string; @@ -848,12 +840,7 @@ interface TargetVersions { commits?: string; // URL } -interface Size { - width: number; - height: number; -} - -interface CodeCardAction { +export interface CodeCardAction { url: string; editor?: CodeCardEditorType; cardType?: CodeCardType; @@ -862,7 +849,7 @@ interface CodeCardAction { /** * The schema for the pxt.json package files */ -interface PackageConfig { +export interface PackageConfig { name: string; version?: string; // installedVersion?: string; moved to Package class @@ -872,13 +859,13 @@ interface PackageConfig { documentation?: string; // doc page to open when loading project, used by sidedocs targetVersions?: TargetVersions; // versions of the target/pxt the package was compiled against description?: string; - dependencies: Map; + dependencies: DependencyMap; license?: string; authors?: string[]; files: string[]; simFiles?: string[]; testFiles?: string[]; - fileDependencies?: Map; // exclude certain files if dependencies are not fulfilled + fileDependencies?: DependencyMap; // exclude certain files if dependencies are not fulfilled preferredEditor?: string; // tsprj, blocksprj, pyprj languageRestriction?: LanguageRestriction; // language restrictions that have been placed on the package testDependencies?: Record; @@ -886,14 +873,21 @@ interface PackageConfig { public?: boolean; partial?: boolean; // true if project is not compileable on its own (eg base) binaryonly?: boolean; - platformio?: PlatformIOConfig; + platformio?: { + dependencies?: DependencyMap; + }; compileServiceVariant?: string; palette?: string[]; paletteNames?: string[]; - screenSize?: Size; + screenSize?: { + width: number; + height: number; + }; yotta?: YottaConfig; - codal?: CodalConfig; - npmDependencies?: Map; + codal?: { + libraries?: string[]; + }; + npmDependencies?: DependencyMap; card?: CodeCard; additionalFilePath?: string; additionalFilePaths?: string[]; @@ -923,10 +917,10 @@ interface PackageConfig { disableTargetTemplateFiles?: boolean; // do not override target template files when commiting to github theme?: string | Record; assetPack?: boolean; // if set to true, only the assets of this project will be imported when added as an extension (no code) - assetPacks?: Map; // a map of dependency id to boolean that indicates which dependencies should be imported as asset packs + assetPacks?: DependencyMap; // a map of dependency id to boolean that indicates which dependencies should be imported as asset packs } -interface PackageExtension { +export interface PackageExtension { // Namespace to add the button under, defaults to package name namespace?: string; // Group to place button in @@ -943,34 +937,24 @@ interface PackageExtension { localUrl?: string; } -interface PlatformIOConfig { - dependencies?: Map; -} - -interface CompilationConfig { - description: string; - config: any; -} - -interface CodalConfig { - libraries?: string[]; -} - -interface YottaConfig { - dependencies?: Map; +export interface YottaConfig { + dependencies?: DependencyMap; config?: any; /** * Overridable config flags */ optionalConfig?: any; - userConfigs?: CompilationConfig[]; + userConfigs?: { + description: string; + config: any; + }[]; /* deprecated */ configIsJustDefaults?: boolean; /* deprecated */ ignoreConflicts?: boolean; } -interface CodeCard { +export interface CodeCard { name?: string; shortName?: string; title?: string; @@ -1023,21 +1007,18 @@ interface CodeCard { className?: string; variant?: string; } - -type SnippetOutputType = 'blocks'; -type SnippetOutputBehavior = /*assumed default*/ 'merge' | 'replace'; -interface SnippetConfig { +export interface SnippetConfig { name: string; namespace: string; group?: string; label: string; - outputType: SnippetOutputType; - outputBehavior?: SnippetOutputBehavior; + outputType: 'blocks'; + outputBehavior?: /*assumed default*/ 'merge' | 'replace'; initialOutput?: string; questions: SnippetQuestions[]; } -type SnippetAnswerTypes = +export type SnippetAnswerTypes = | 'number' | 'text' | 'variableName' @@ -1046,70 +1027,56 @@ type SnippetAnswerTypes = | 'yesno' | string; // TODO(jb) Should include custom answer types for number, enums, string, image -interface SnippetGoToOptions { +export interface SnippetGoToOptions { question?: number; - validate?: SnippetValidate; + validate?: { + regex?: { + token: string; + regex: string; + match?: SnippetParameters; + noMatch?: SnippetParameters; + }; + }; parameters?: SnippetParameters[]; // Answer token with corresponding question } -interface SnippetParameters { +export interface SnippetParameters { token?: string; answer?: string; question: number; } -interface SnippetInputAnswerSingular { - answerToken: string; - defaultAnswer: SnippetAnswerTypes; -} - -interface SnippetInputAnswerPlural { - answerTokens: string[]; - defaultAnswers: SnippetAnswerTypes[]; -} - -interface SnippetInputOtherType { - type: string; -} - -interface SnippetInputNumberType { - type: 'number' | 'positionPicker'; - max?: number; - min?: number; -} - -interface SnippetInputDropdownType { - type: 'dropdown'; - options: Record; -} - -interface SnippetInputYesNoType { - type: 'yesno'; -} - -type SnippetQuestionInput = { label?: string } & ( - | SnippetInputAnswerSingular - | SnippetInputAnswerPlural +export type SnippetQuestionInput = { label?: string } & ( + | { + // Singular input answer. + answerToken: string; + defaultAnswer: SnippetAnswerTypes; + } + | { + // Plural input answer. + answerTokens: string[]; + defaultAnswers: SnippetAnswerTypes[]; + } ) & ( - | SnippetInputOtherType - | SnippetInputNumberType - | SnippetInputDropdownType - | SnippetInputYesNoType + | { + type: string; + } + | { + type: 'number' | 'positionPicker'; + max?: number; + min?: number; + } + | { + type: 'dropdown'; + options: Record; + } + | { + type: 'yesno'; + } ); -interface SnippetValidateRegex { - token: string; - regex: string; - match?: SnippetParameters; - noMatch?: SnippetParameters; -} - -interface SnippetValidate { - regex?: SnippetValidateRegex; -} - -interface SnippetQuestions { +export interface SnippetQuestions { title: string; output?: string; outputConditionalOnAnswer?: string; @@ -1119,7 +1086,7 @@ interface SnippetQuestions { hint?: string; } -interface TutorialOptions { +export interface TutorialOptions { tutorial?: string; // tutorial tutorialName?: string; // tutorial title tutorialReportId?: string; // if this tutorial was user generated, the report abuse id @@ -1147,7 +1114,7 @@ interface TutorialOptions { simTheme?: Partial; } -interface TutorialStepInfo { +export interface TutorialStepInfo { // Step metadata showHint?: boolean; // automatically displays hint showDialog?: boolean; // no coding, displays in modal @@ -1172,24 +1139,15 @@ interface TutorialStepInfo { localValidationConfig?: CodeValidationConfig; } -interface TutorialCompletionInfo { - // id of the tutorial - id: string; - // number of steps completed - steps: number; -} - -interface TutorialBlockConfigEntry { - blockId?: string; - xml?: string; -} - -interface TutorialBlockConfig { +export interface TutorialBlockConfig { md?: string; // `blockconfig` markdown fragment - blocks?: TutorialBlockConfigEntry[]; // markdown fragment can contain multiple block definitions + blocks?: { + blockId?: string; + xml?: string; + }[]; // markdown fragment can contain multiple block definitions } -interface TutorialMetadata { +export interface TutorialMetadata { activities?: boolean; // tutorial consists of activities, then steps. uses `###` for steps explicitHints?: boolean; // tutorial expects explicit hints in `#### ~ tutorialhint` format flyoutOnly?: boolean; // no categories, display all blocks in flyout @@ -1202,21 +1160,17 @@ interface TutorialMetadata { preferredEditor?: string; // preferred editor for opening the tutorial } -interface TutorialActivityInfo { +export interface TutorialActivityInfo { name: string; step: number; } -interface CodeValidatorBaseProperties { - enabled?: string; - markers?: string; -} - -interface CodeValidatorMetadata { - validatorType: string; - properties: CodeValidatorBaseProperties; -} - -interface CodeValidationConfig { - validatorsMetadata: CodeValidatorMetadata[]; +export interface CodeValidationConfig { + validatorsMetadata: { + validatorType: string; + properties: { + enabled?: string; + markers?: string; + }; + }[]; } diff --git a/typedoc.json b/typedoc.json new file mode 100644 index 0000000..9308f46 --- /dev/null +++ b/typedoc.json @@ -0,0 +1,14 @@ +{ + "name": "MakeCode Embed", + "navigationLinks": { + "micro:bit tech site": "https://tech.microbit.org", + "GitHub": "https://github.com/microbit-foundation/makecode-embed" + }, + "projectDocuments": ["docs/react.md", "docs/vanilla.md"], + "entryPoints": ["./src/react/index.ts", "./src/vanilla/index.ts"], + "out": "./docs/build", + "readme": "./README.md", + "headings": { "readme": false }, + "customCss": "./docs/custom.css", + "excludeExternals": true +}