@wooritech/code-board NPM

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


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
}