# CodeBoard

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

![preview](https://github.com/wooritech/code-director/blob/master/preview/cb-preview.png?raw=true)

## How to use

- install

```bash
npm i @wooritech/code-board
```

- initialize

```js

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](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) |
| --- | 
| Latest ✔ |

## CodeRunner Support

- service that can test your code.

|  |
| --- | 
| [CodeSandbox](https://codesandbox.io/) ✔ |

## About Style sheet

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

## api

### constructor 

```typescript
const c = new CodeBoard(container: HTMLElement, preset?: Ipreset, hasTools: boolean = true);
```

- `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).
- `hasTools`: provide functionallity as UI through buttons.

### property

| name | type | description |
|:---:|:---:|:---:|
| `presetType`| PresetType | get or set type of preset |
| `isEmbeded` | 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)
| `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**

```ts
export enum RunnerType {
    CSB = 'codesandbox'
}
```

**presetType**

```typescript
enum PresetType {
    STATIC = 'static'
}
```

**Ipreset**

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

**Ifiles**

```ts
interface Ifiles {
    [filename: string]: Icontent
}

interface Icontent {
    content: string
}

// example
let files: Ifiles = {
    'index.js': {
        content: `let a = '1';`
    }
}
```

**Iconfig**

```ts
export interface Iconfig {
    // true: adding or removing files is not allowed
    isFixedTemplate?: boolean
}
```

## Question or Advice

> zerosheepmoo@gmail.com