@wooritech/code-board

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

[e-mail]