CodeBoard

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

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

| | | --- | | Latest ✔ |

CodeRunner Support

• service that can test your code.

| | | --- | | 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

[email protected]