Notify President Madagascar

    @wooritech/code-board
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.0-alpha.24 • Public • Published

    CodeBoard

    Do not use this for production build. This is unstable.

    preview

    How to use

    • install
    npm i @wooritech/code-board
    • initialize
    let codeBoard = new CodeBoard(Container);
    • It's supported on the broswer
    • It's supported as a package

    with package

    If you eventually want to bundle with this, there are several requirements to set the environment properly. Because of Monaco Editor, you must use webpack bundler.

    I recognized this is kind of serious issue and now I' m finding the solution to get rid of this condition.

    • you should use webpack
    ...
    entry: {
        "app": path.resolve(__dirname, "src/index.ts"),
        "editor.worker": "monaco-editor/esm/vs/editor/editor.worker.js",
        "json.worker": "monaco-editor/esm/vs/language/json/json.worker",
        "css.worker": "monaco-editor/esm/vs/language/css/css.worker",
        "html.worker": "monaco-editor/esm/vs/language/html/html.worker",
        "ts.worker": "monaco-editor/esm/vs/language/typescript/ts.worker"
      },
      output: {
        globalObject: 'self',
        path: path.resolve(__dirname, "dist"),
        filename: "[name].bundle.js",
        libraryTarget: "umd"
      },
      ...
    

    Browser Support

    Chrome
    Latest

    CodeRunner Support

    • service that can test your code.
    CodeSandboxIcon
    CodeSandbox

    About Style sheet

    • Basically, it is not recommended to edit the css file for some classes.
    • Just be careful when you edit.

    api

    constructor

    const c = CodeBoard.create(container: HTMLElement, preset?: Ipreset, config?: Iconfig);
    • container: container HTMLElement that contains CodeBoard as ChildElement
    • preset: configuration to set the runner environment. implementing Ipreset. The default is STATIC settings for CSB (runner).
    • config: configuration.

    property

    name type description
    presetType PresetType get or set type of preset
    isEmbedded boolean get or set runner mode (iframe / new Tab)

    method

    name parameter return description
    runCode() void void run the code with the Runner (default: codesandbox)
    closeEmbeddedRunner() void void close the embedded Runner
    exportCode() void Ifiles return the file information, usually the input source code on the CodeBoard
    exportCodeByFilename(filename) filename: string string return the code as a string corresponding filename
    exportURL() void string export code running service's url
    addFile(filename) filename: string, content?: string void add the file on the CodeBoard
    addFiles(filenames) filenames: string[] void add the files on the CodeBoard
    removeFile(filename) filename: string void remove the file on the CodeBoard
    removeFiles(filenames) filename: string[] void remove the files on the CodeBoard

    type

    runnerType

    export enum RunnerType {
        CSB = 'codesandbox'
    }

    presetType

    enum PresetType {
        STATIC = 'static'
    }

    Ipreset

    interface Ipreset {
        name: string
        type: PresetType
        runner: RunnerType
        files?: Ifiles
        otherConfig?: Iconfig
    }

    Ifiles

    interface Ifiles {
        [filename: string]: Icontent
    }
    
    interface Icontent {
        content: string
    }
    
    // example
    let files: Ifiles = {
        'index.js': {
            content: `let a = '1';`
        }
    }

    Iconfig

    export interface Iconfig {
        // true: adding or removing files is not allowed, default: false
        isFixedTemplate?: boolean
        // true: provide control preset settings, and some methods UI through buttons, default: true
        hasTools?: boolean
        // true: provide control runner settings through buttons, default: true
        hasRunnerTools?: boolean
        // true: provide shell functionality (alpha)
        hasShell?: boolean
    }

    Question or Advice

    zerosheepmoo@gmail.com

    Install

    npm i @wooritech/code-board

    DownloadsWeekly Downloads

    22

    Version

    1.0.0-alpha.24

    License

    ISC

    Unpacked Size

    10.7 MB

    Total Files

    103

    Last publish

    Collaborators

    • onlydel
    • sykim1009
    • tea7day
    • zerosheepmoo