IBSheet Loader

https://ibsheet.github.io/loader-manual/
Admin
IBSheet Loader is a library for dynamically loading IBSheet script files and modules into web pages...
Tokens:16,830
Snippets:159
Trust Score:9.7
Update:5 months ago
Show doc for...
Tokens:
Raw
### Install IBSheetLoader and React Router

Source: https://ibsheet.github.io/loader-manual/docs/spa/react

Install the necessary packages for IBSheetLoader and routing. You can use either yarn or npm.

```bash
cd <project_dir>
yarn add @ibsheet/loader react-router-dom
# using npm
# npm i -S @ibsheet/loader react-router-dom
```

--------------------------------

### Start Angular Development Server

Source: https://ibsheet.github.io/loader-manual/docs/spa/angular

Run the Angular development server to view your application. Use either yarn or npm.

```bash
yarn start
# using npm
# npm start
```

--------------------------------

### Install IBSheetLoader using npm or yarn

Source: https://ibsheet.github.io/loader-manual/docs/basic/getting-started

Install the IBSheetLoader package for use in Node.js projects via npm or yarn.

```bash
# using npm
$ npm install --save @ibsheet/loader
# using yarn (https://yarnpkg.com/)
$ yarn add @ibsheet/loader
```

--------------------------------

### Install IBSheetLoader and Dependencies

Source: https://ibsheet.github.io/loader-manual/docs/spa/vue

Install the necessary packages for IBSheetLoader, Vue Router, and SCSS support. For Vue 3, ensure you install Vue Router version 4.x.

```bash
cd <project_dir>
yarn add @ibsheet/loader vue-router
yarn add -D sass
# using npm
# npm i -S @ibsheet/loader vue-router
# npm i -D sass
```

--------------------------------

### Install Angular CLI

Source: https://ibsheet.github.io/loader-manual/docs/spa/angular

Install the Angular CLI globally using npm. This command is required before creating a new Angular project.

```bash
npm install -g @angular/cli
```

--------------------------------

### Run Development Server

Source: https://ibsheet.github.io/loader-manual/docs/spa/vue

Start the Vite development server to see your Vue application in action. This command compiles your code and serves it locally.

```bash
yarn dev
# using npm
# npm run dev
```

--------------------------------

### Load IBSheet using IBSheetLoader

Source: https://ibsheet.github.io/loader-manual/docs/basic/getting-started

Configure IBSheetLoader with the library registry and load 'ibsheet'. This example also demonstrates setting up a listener for the 'loaded' event.

```javascript
import loader from '@ibsheet/loader'
const ibsheetLib = {
  name: 'ibsheet',
  baseUrl: '<publicpath>/ibsheet'
}
loader.config({
  registry: [ibsheetLib]
})
function testLoad() {
  // add 'loaded' event listener
  loader.once('loaded', evt => {
    // ibsheet: IBSheetStatic
    const ibsheet = this.getIBSheetStatic()
    // todo something
  })
  // load ibsheet
  loader.load() // or loader.load('ibsheet')
}
```

--------------------------------

### Remove Sheet Example

Source: https://ibsheet.github.io/loader-manual/docs/ibsheet/remove-sheet

This example demonstrates creating an IBSheet and then removing it after a specified delay. It utilizes loader events to log the creation and removal process.

```javascript
// get global loader instance
import loader from '@ibsheet/loader'
// load ibsheet library
loader.load({
  name: 'ibsheet',
  baseUrl: '<publicpath>/ibsheet'
})
const REMOVE_TIME = 3000
loader
  // when created sheet
  .once('created-sheet', evt => {
    // evt.target: IBSheet 인스턴스
    const sid = evt.target.id
    console.log(`"${sid}" 시트는 ${REMOVE_TIME}ms 후에 제거됩니다.`) 
    setTimeout(() => {
      loader.removeSheet(sid)
    }, REMOVE_TIME)
  })
  // when removed sheet
  .once('removed-sheet', evt => {
    // evt.data.id: 제거된 시트의 아이디
    const sid = evt.data.id
    console.log(`"${sid}" 시트가 제거되었습니다.`) 
  })
  // create sheet
  .createSheet({
    id: 'sheet',
    el: 'sheetWrapper',
    options: {
      // ...your options
    },
    data: [
      // ...your data
    ]
  })
  // when created sheet
  .then(sheet => {
    // 주의: 해당 구간에서 데이터 조회를 하면 안됩니다. 데이터 조회는 onRenderFirstFinish 이벤트에서 실행해야합니다.
    console.log(`"${sheet.id}" 시트가 만들어졌습니다.`) 
  })
```

--------------------------------

### Configure Vue Router and App Entry Point

Source: https://ibsheet.github.io/loader-manual/docs/spa/vue

Set up the Vue Router in `src/main.js` to handle navigation between different views. This example defines routes for Home, Page1, and Page2.

```javascript
import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import App from './App.vue'
import HelloWorld from './components/HelloWorld.vue'
import PageOne from './components/PageOne.vue'
import PageTwo from './components/PageTwo.vue'
const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', name: 'home', component: HelloWorld },
    { path: '/page1', name: 'page1', component: PageOne },
    { path: '/page2', name: 'page2', component: PageTwo }
  ]
})
createApp(App).use(router).mount('#app')
```

--------------------------------

### Create and Remove IBChart

Source: https://ibsheet.github.io/loader-manual/docs/ibchart/remove-chart

This example demonstrates how to create an IBChart and then remove it after a specified delay. It utilizes loader events to log chart creation and removal.

```javascript
// get global loader instance
import loader from '@ibsheet/loader'
// load ibchart library
loader.load({
  name: 'ibchart',
  baseUrl: '<publicpath>/ibchart',
  dependentUrls: [
    'https://code.highcharts.com/highcharts.js'
  ]
})
const REMOVE_TIME = 3000
loader
  // when created chart
  .once('created-chart', evt => {
    // evt.target: IBChart 인스턴스
    const sid = evt.target.getId()
    console.log(`"${sid}" 차트는 ${REMOVE_TIME}ms 후에 제거됩니다.`) 
    setTimeout(() => {
      loader.removeChart(sid)
    }, REMOVE_TIME)
  })
  // when removed chart
  .once('removed-chart', evt => {
    // evt.data.id: 제거된 차트의 아이디
    const sid = evt.data.id
    console.log(`"${sid}" 차트가 제거되었습니다.`) 
  })
  // create chart
  .createChart({
    id: 'chart',
    cont: 'chartWrapper',
    options: {
      width: // ...your chart width
      height: // ...your chart height
    }
  })
  // when created chart
  .then(chart => {
    console.log(`"${chart.getId()}" 차트가 만들어졌습니다.`) 
  })
```

--------------------------------

### Create Vue Project with Vite

Source: https://ibsheet.github.io/loader-manual/docs/spa/vue

Use this command to create a new Vue.js project with Vite. Ensure you have Node.js and npm/yarn installed.

```bash
npm create vite@latest <project_dir> -- --template vue
```

--------------------------------

### Install IBSheetLoader Package

Source: https://ibsheet.github.io/loader-manual/docs/spa/angular

Add the IBSheetLoader package to your Angular project. Use either yarn or npm for installation.

```bash
cd <project_dir>
yarn add @ibsheet/loader
# using npm
# npm i -S @ibsheet/loader
```

--------------------------------

### Configure HighCharts in React with IBSheetLoader

Source: https://ibsheet.github.io/loader-manual/docs/ibchart/create-chart

Example of setting up HighCharts and IBSheetLoader within a React application. It shows how to import Highstock and related modules, and configure the loader.

```javascript
import loader from '@ibsheet/loader';
import Highcharts from 'highcharts/highstock';
import 'highcharts/highcharts-more';
import 'highcharts/modules/series-label';
// Highcharts를 전역 객체에 설정
if (typeof window !== 'undefined') window.Highcharts = Highcharts;
const ibchartLib = {
  name: 'ibchart',
  baseUrl: 'https://www.ibsheet.com/v8/assets/lib/ibchart/'
}
// 로더 config
loader.config({
  registry: [ibchartLib]
});
loader.load()
```

--------------------------------

### Configure HighCharts in Vue with IBSheetLoader

Source: https://ibsheet.github.io/loader-manual/docs/ibchart/create-chart

Example of setting up HighCharts and IBSheetLoader within a Vue application. This includes importing and initializing HighCharts modules and configuring the loader.

```javascript
import loader from '@ibsheet/loader';
// Highcharts 모듈 import
import Highcharts from 'highcharts';
import HighchartsMore from 'highcharts/highcharts-more';
import SeriesLabel from 'highcharts/modules/series-label';
// Highcharts 모듈 초기화 헬퍼
const initModule = (module, hc) => {
  const fn = typeof module === 'function' ? module : module?.default;
  if (fn) fn(hc);
};
// Highcharts 모듈 초기화
initModule(HighchartsMore, Highcharts);
initModule(SeriesLabel, Highcharts);
// Highcharts를 전역 객체에 설정
if (typeof window !== 'undefined') window.Highcharts = Highcharts;
const ibchartLib = {
  name: 'ibchart',
  baseUrl: 'https://www.ibsheet.com/v8/assets/lib/ibchart/'
}
loader.config({
  registry: [ibchartLib]
});
loader.load()
```

--------------------------------

### Get IBSheetLoader Instance in Node.js (CommonJS)

Source: https://ibsheet.github.io/loader-manual/docs/basic/getting-started

Import the IBSheetLoader instance using `require` for CommonJS environments like Node.js.

```javascript
const loader = require('@ibsheet/loader')
// or
// const { IBSheetLoader: loader } = require('@ibsheet/loader')
```

--------------------------------

### Configure HighCharts in Angular with IBSheetLoader

Source: https://ibsheet.github.io/loader-manual/docs/ibchart/create-chart

Example of setting up HighCharts and IBSheetLoader within an Angular application. It demonstrates importing HighCharts modules and configuring the loader's registry.

```javascript
import loader from '@ibsheet/loader';
import Highcharts from 'highcharts';
import 'highcharts/highcharts-more';
import 'highcharts/modules/series-label';
// Highcharts를 전역 객체에 설정
if (typeof window !== 'undefined') window.Highcharts = Highcharts;
const ibchartLib = {
  name: 'ibchart',
  baseUrl: 'https://www.ibsheet.com/v8/assets/lib/ibchart/'
}
// 로더 config
loader.config({
  registry: [ibchartLib]
});
loader.load()
```

--------------------------------

### Configure IBSheetLoader with HighCharts

Source: https://ibsheet.github.io/loader-manual/docs/ibchart/create-chart

Configure the IBSheetLoader to use the HighCharts module. This example shows how to set up the loader with `dependentUrls` for HighCharts. It's recommended to manage HighCharts loading based on your SPA environment.

```javascript
import loader from '@ibsheet/loader'
// setup loader configuration
loader.config({
  registry: [
    {
      name: 'ibchart',
      baseUrl: '<publicpath>/ibchart',
      dependentUrls: [
        '<publicpath>/HighCharts/highcharts.js'
      ]
    }
  ]
})
// load ibchart and create chart
loader.createChart({
  id: 'chart',
  el: 'chartWrapper',
  options: {
    width: '100%',
    height: '400px'
  }
}).then(chart => {
  // chart: IBChartInstace
  // 생성된 차트 객체에 API [`setOptions`](https://docs.ibsheet.com/ibchart/v1/manual/#docs/funcs/chartObject/setOptions)를 통해 사용할 시트의 모든 속성을 설정합니다.
  console.log('created ibschart:', chart.getId())
})
```

--------------------------------

### Get IBSheetLoader Instance in ES6/TypeScript

Source: https://ibsheet.github.io/loader-manual/docs/basic/getting-started

Import the IBSheetLoader instance using ES module syntax for ES6 or TypeScript projects.

```javascript
import loader from '@ibsheet/loader'
// or
// import { IBSheetLoader as loader } from '@ibsheet/loader'
```

--------------------------------

### Get IBSheetLoader Instance in Browser (UMD)

Source: https://ibsheet.github.io/loader-manual/docs/basic/getting-started

Access the IBSheetLoader instance globally via the `window` object when using the UMD build in a browser.

```javascript
var loader = window.IBSheetLoader
```

--------------------------------

### Configure IBSheetLoader in App.vue

Source: https://ibsheet.github.io/loader-manual/docs/spa/vue

In your main `App.vue` component, configure the IBSheetLoader by registering the 'ibsheet' module with its base URL. This setup is crucial for loading IBSheet resources.

```javascript
import loader from '@ibsheet/loader'
loader.config({
  registry: [{
    name: 'ibsheet',
    baseUrl: '/ibsheet'
  }]
})
export default {
  name: 'App',
  data() {
    return {
      loaderVersion: loader.version
    }
  }
}
```

--------------------------------

### Handle Chart Removal Failure

Source: https://ibsheet.github.io/loader-manual/docs/ibchart/remove-chart

This example shows how to catch errors when chart removal fails by listening to the 'remove-chart-failed' event. It logs the chart ID and the error object.

```javascript
loader.once('remove-chart-failed', evt => {
  const { data, error } = evt
  console.error('[REMOVE_CHART_ERROR]', data.id, error)
})
```

--------------------------------

### Get IBSheetStatic after loading

Source: https://ibsheet.github.io/loader-manual/docs/ibsheet/create-sheet

Retrieves the IBSheetStatic object after the ibsheet library has been loaded. This allows access to sheet-related static methods and properties.

```javascript
import loader from '@ibsheet/loader'
// IBSheetStatic
let IBSheet
loader
  // add 'loaded' event listener
  .once('loaded', evt => {
    const target = evt.target
    console.log('ibsheet loaded!')
    if (target.alias === 'ibsheet') {
      IBSheet = loader.getIBSheetStatic()
    }
  })
  // load ibsheet
  .load({
    name: 'ibsheet',
    baseUrl: '<publicpath>/ibsheet'
  })
```

```javascript
import loader from '@ibsheet/loader'
// 시트 Static 객체 가져오기
const ibsheet = loader.getIBSheetStatic()
// 시트 create 이후, ibsheet static 객체에서 sheet 아이디에 맞는 시트를 가져옵니다.
console.log(ibsheet['sheet'])
```

--------------------------------

### Create React Project with Vite

Source: https://ibsheet.github.io/loader-manual/docs/spa/react

Use this command to create a new React project using Vite. Replace `<project_dir>` with your desired project name.

```bash
npm create vite@latest <project_dir> -- --template react
```

--------------------------------

### Load Multiple Libraries Simultaneously

Source: https://ibsheet.github.io/loader-manual/docs/adv/load

Loads multiple libraries at once, including third-party libraries like sweetalert2, pretty-checkbox, and Font Awesome. This method requires defining each library with its `name`, `url`, and optionally `type` and `dependentUrls`. The `loader.config()` method is used to register these libraries before loading them.

```javascript
// get global loader instance
import loader from '@ibsheet/loader'
// define ibsheet libs for loader registry
const myLibraries = [
  /**
   * sweetalert2
   * https://sweetalert2.github.io/
   */
  {
    name: 'swal2',
    url: 'https://cdn.jsdelivr.net/npm/sweetalert2@8',
    // 위와 같이 URL에 스크립트의 유형(파일확장자)이 포함되지 않은 경우
    // type 속성을 통해 지정해주어야 한다.
    type: 'js'
  },
  /**
   * pretty checkbox
   * https://lokesh-coder.github.io/pretty-checkbox/
   */
  {
    name: 'pretty-checkbox',
    url: 'https://cdn.jsdelivr.net/npm/pretty-checkbox@3.0/dist/pretty-checkbox.min.css'
  },
  /**
   * Font Awesome
   * https://fontawesome.com/
   */
  {
    name: 'font-awesome',
    url: 'https://kit.fontawesome.com/21c0a510fd.js',
    // FontAwesome5의 라이브러리 키트는 자체적으로 스크립트들을 동적으로 로드하므로
    // 아래와 같이 로드되는 스크립트들을 명시해주어야 unload시 함께 제거된다.
    dependentUrls: [
      'https://kit-free.fontawesome.com/releases/latest/css/free-v4-shims.min.css',
      'https://kit-free.fontawesome.com/releases/latest/css/free-v4-font-face.min.css',
      'https://kit-free.fontawesome.com/releases/latest/css/free.min.css'
    ]
  }
  // ... your need libraries
]
// setup loader configuration
loader
  // 레지스트리 라이브러리 등록
  .config({
    registry: myLibraries
  })
  // 라이브러리 로드
  // 1. arg1: Array<string> - 불러올 라이브러리의 이름을 배열로 전달
  // 2. arg2: boolean - ibsheet 자동로드 기능을 사용안함
  .load([
    'swal2',
    'pretty-checkbox',
    'font-awesome'
  ], false)
```

--------------------------------

### App.css Styling

Source: https://ibsheet.github.io/loader-manual/docs/spa/react

Basic CSS for the React application, including styling for navigation and the home screen layout.

```css
.App { text-align: center }
.App-logo { height: 40vmin }
.home {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}
.App-link { color: #09d3ac }
.top-nav ul { padding: 0 }
.top-nav li { display: inline-block }
.top-nav li + li { margin-left: 1rem }
```

--------------------------------

### HelloWorld Component - Unload IBSheet

Source: https://ibsheet.github.io/loader-manual/docs/spa/vue

The HelloWorld component demonstrates how to ensure IBSheet is unloaded when the component is mounted. This prevents potential conflicts if IBSheet was loaded elsewhere.

```javascript
import loader from '@ibsheet/loader'
export default {
  name: 'HelloWorld',
  data() {
    return {
      msg: 'IBSheetLoader for Vue!'
    }
  },
  mounted() {
    loader.unload()
  }
}
```

--------------------------------

### Create IBSheet using createSheet

Source: https://ibsheet.github.io/loader-manual/docs/ibsheet/create-sheet

Loads IBSheet and creates a sheet instance based on the provided options. Use this for direct sheet creation. Note that the sheet is created but not yet rendered; avoid data retrieval until the `onRenderFirstFinish` event.

```javascript
import loader from '@ibsheet/loader'
// setup loader configuration
loader.config({
  registry: [
    {
      name: 'ibsheet',
      baseUrl: '<publicpath>/ibsheet'
    }
  ]
})
// load ibsheet and create sheet
loader.createSheet({
  id: 'sheet',
  el: 'sheetWrapper',
  options: {
    // ...your options
  },
  data: [
    // ...your data
  ]
}).then(sheet => {
  // sheet: IBSheetInstance
  // 시트 객체가 생성되지만, 시트가 그려지지는 않은 상태.
  // 주의: 해당 구간에서 데이터 조회를 하면 안됩니다. 데이터 조회는 onRenderFirstFinish 이벤트에서 실행해야합니다.
  console.log('created ibsheet:', sheet.id)
})
```

--------------------------------

### #createSheet

Source: https://ibsheet.github.io/loader-manual/docs/ibsheet/create-sheet

Loads ibsheet and creates a sheet based on the arguments provided to createSheet. The API is the same as IBSheet.create, but the interface has been improved to allow aliasing of the el, options property names, and direct setting of the element instead of the target element's ID.

```APIDOC
## #createSheet

`ibsheet`를 로드하고 `createSheet`의 인자를 기반으로 시트를 생성합니다.   
API는 `IBSheet.create`와 동일하지만 `el`, `options` 속성 이름의 별칭과, 대상 엘리먼트의 아이디 대신 엘리먼트를 직접 설정할 수 있도록 인터페이스를 개선하였습니다.
  * `id` - 시트의 아이디(전역변수 이름), 설정되지 않으면 자동으로 아이디를 생성
  * `el` - 시트가 만들어질 `HTMLElement` 아이디(별칭: `elementId`)
  * `element` - 시트가 만들어질 `HTMLElement` 대상(`el` 속성의 대체속성)
    * `el` 속성이 설정되지 않은 경우에만 유효
    * 대상 엘리먼트에 `id`가 없을 경우 자동으로 생성한 아이디를 바인딩
  * `options` - 시트 옵션(별칭: `config`)
  * `data` - 시트의 데이터

### #사용 예제
```javascript
// get global loader instance
import loader from '@ibsheet/loader'
// setup loader configuration
loader.config({
  registry: [
    {
      name: 'ibsheet',
      baseUrl: '<publicpath>/ibsheet'
    }
  ]
})
// load ibsheet and create sheet
loader.createSheet({
  id: 'sheet',
  el: 'sheetWrapper',
  options: {
    // ...your options
  },
  data: [
    // ...your data
  ]
}).then(sheet => {
  // sheet: IBSheetInstance
  // 시트 객체가 생성되지만, 시트가 그려지지는 않은 상태.
  // 주의: 해당 구간에서 데이터 조회를 하면 안됩니다. 데이터 조회는 onRenderFirstFinish 이벤트에서 실행해야합니다.
  console.log('created ibsheet:', sheet.id)
})
```
```

--------------------------------

### Create New Angular Project

Source: https://ibsheet.github.io/loader-manual/docs/spa/angular

Generate a new Angular project using the Angular CLI. Replace `<project_dir>` with your desired project name.

```bash
ng new <project_dir>
```

--------------------------------

### AppComponent HTML Template

Source: https://ibsheet.github.io/loader-manual/docs/spa/angular

The `app.component.html` file displays the IBSheetLoader version and provides navigation links to different pages. The `<router-outlet>` directive renders the routed components.

```html
<p>@ibsheet/loader v{{ loaderVersion }}</p>
<h2>Go to Pages: </h2>
<ul>
  <li><a routerLink="/" routerLinkActive="active">Home</a></li>
  <li><a routerLink="/page1" routerLinkActive="active">Page1</a></li>
  <li><a routerLink="/page2" routerLinkActive="active">Page2</a></li>
</ul>
<div class="main">
  <router-outlet></router-outlet>
  <!-- Routed components go here -->
</div>
```

--------------------------------

### Copy IBSheet Library to Public Folder

Source: https://ibsheet.github.io/loader-manual/docs/spa/vue

Place the IBSheet library files into the `public` folder of your project if you are not using a server URL. This makes the library accessible at the root level.

```text
├── public/
|  └── ibsheet/
|     ├── css/
|     ├── locale/
|     ├── fonts/
|     ├── ibsheet.js
|     └── ibleaders.js
```

--------------------------------

### Handle 'load' event

Source: https://ibsheet.github.io/loader-manual/docs/adv/events

The 'load' event is triggered when a library begins to load. The event's 'target' property refers to the RegistryItem being loaded.

```javascript
loader.once('load', evt => {
  const { target } = evt
  console.log('load start:', target.alias)
})
```

--------------------------------

### Generate Angular Components

Source: https://ibsheet.github.io/loader-manual/docs/spa/angular

Create new Angular components for different views (home, page1, page2) using the Angular CLI. Navigate to the `src` directory before running these commands.

```bash
cd src
ng generate component home
ng generate component page1
ng generate component page2
```

--------------------------------

### Configure IBSheetLoader with External Libraries

Source: https://ibsheet.github.io/loader-manual/docs/etc/external-lib

Define and register external libraries like sweetalert2, pretty-checkbox, and Font Awesome with IBSheetLoader. Specify the URL and type (js/css) for each library. For libraries with dependent scripts, list them in `dependentUrls`.

```javascript
var loader = window.IBSheetLoader
var myLibraries = [
  /**
   * sweetalert2
   * https://sweetalert2.github.io/
   */
  {
    name: 'swal2',
    url: 'https://cdn.jsdelivr.net/npm/sweetalert2@8',
    // 위와 같이 URL에 스크립트의 유형(파일확장자)이 포함되지 않은 경우
    // type 속성을 통해 지정해주어야 한다.
    type: 'js'
  },
  /**
   * pretty checkbox
   * https://lokesh-coder.github.io/pretty-checkbox/
   */
  {
    name: 'pretty-checkbox',
    url: 'https://cdn.jsdelivr.net/npm/pretty-checkbox@3.0/dist/pretty-checkbox.min.css'
  },
  /**
   * Font Awesome
   * https://fontawesome.com/
   */
  {
    name: 'font-awesome',
    url: 'https://kit.fontawesome.com/21c0a510fd.js',
    // FontAwesome5의 라이브러리 키트는 자체적으로 스크립트들을 동적으로 로드하므로
    // 아래와 같이 로드되는 스크립트들을 명시해주어야 unload시 함께 제거된다.
    dependentUrls: [
      'https://kit-free.fontawesome.com/releases/latest/css/free-v4-shims.min.css',
      'https://kit-free.fontawesome.com/releases/latest/css/free-v4-font-face.min.css',
      'https://kit-free.fontawesome.com/releases/latest/css/free.min.css'
    ]
  }
  // ... your need libraries
]
loader.config({
  registry: myLibraries
})
```

--------------------------------

### Event Registration Methods

Source: https://ibsheet.github.io/loader-manual/docs/adv/events

These methods allow you to register event listeners. 'on' registers a listener that persists until removed, while 'once' registers a listener that executes only once.

```APIDOC
## on

### Description
Registers an event listener that will be triggered every time the event is emitted, until it is explicitly removed.

### Method
```typescript
on: (name: string | symbol, handler: evt => void): this
```

### Usage
```javascript
loader.on(eventname, handle)
```

## once

### Description
Registers an event listener that will be triggered only once. After the first execution, the listener is automatically removed.

### Method
```typescript
once: (name: string | symbol, handler: evt => void): this
```

### Usage
```javascript
loader.once(eventname, handle)
```
```

--------------------------------

### App.vue Styles

Source: https://ibsheet.github.io/loader-manual/docs/spa/vue

Basic SCSS styling for the main App component, including layout and navigation link appearance.

```scss
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.main-navs {
  > h3 {
    margin: 40px 0 0;
  }
  > ul {
    list-style-type: none;
    padding: 0;
    > li {
      display: inline-block;
      margin: 0 10px;
      a > {
        color: #42b983;
      }
    }
  }
}
```

--------------------------------

### Configure IBSheetLoader in App.jsx

Source: https://ibsheet.github.io/loader-manual/docs/spa/react

Configure the IBSheetLoader by setting up the registry with the base URL for the ibsheet library. This code is placed in your main `App.jsx` file.

```jsx
import React from 'react'
import { BrowserRouter, Route, Link, Routes } from 'react-router-dom'
import loader from '@ibsheet/loader'
import Home from './components/home'
import Page1 from './components/page1'
import Page2 from './components/page2'
import './App.css'
loder.config({
  registry: [{
    name: 'ibsheet',
    baseUrl: '/ibsheet'
  }]
})
const App = () => {
  const loaderVersion = loader.version
  return (
    <div className="App">
      <p>@ibsheet/loader v{ loaderVersion }</p>
      <BrowserRouter className="main">
        <div className="top-nav">
          <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/page1">Page1</Link></li>
            <li><Link to="/page2">Page2</Link></li>
          </ul>
        </div>
       <Routes>
          <Route path="/" element={ <Home /> }/>
          <Route path="/page1" element={ <Page1 /> }/>
          <Route path="/page2" element={ <Page2 /> }/>
        </Routes>
      </BrowserRouter>
    </div>
  )
}
export default App
```

--------------------------------

### Handle Chart Creation Event

Source: https://ibsheet.github.io/loader-manual/docs/ibchart/create-chart

Listen for the 'create-chart' event to perform actions when a chart creation process begins. The event provides the chart ID and creation options.

```javascript
loader.once('create-chart', evt => {
  const { data } = evt
  console.log('create sheetId:', data.id)
})
```

--------------------------------

### Page1 Component - Create IBSheet

Source: https://ibsheet.github.io/loader-manual/docs/spa/react

Creates an IBSheet using the first sample data upon component mount. The sheet is removed when the component is unmounted using `loader.removeSheet()`.

```jsx
import React, { useEffect } from 'react'
import loader from '@ibsheet/loader'
import { SheetSampleData } from '../shared/ibsheet-data'
const Page1 = () => {
  let sheetId = ''
  const sheetEl = 'sheetContainer'
  useEffect(() => {
    const { data, options } = SheetSampleData[0]
    loader.createSheet({
      el: sheetEl,
      options,
      data
    }).then(sheet => {
      // 주의: 해당 구간에서 데이터 조회를 하면 안됩니다. 데이터 조회는 onRenderFirstFinish 이벤트에서 실행해야합니다.
      sheetId = sheet.id;
      console.log('created sheet', sheet.id);
    });
    return () => {
      loader.removeSheet(sheetId)
    }
  }, [])
  return (
    <div>
      <p>page1 works!</p>
      <div id={ sheetEl }></div>
    </div>
  )
}
export default Page1
```

--------------------------------

### Page2 Component - Create IBSheet

Source: https://ibsheet.github.io/loader-manual/docs/spa/react

Creates an IBSheet using the second sample data upon component mount. The sheet is removed when the component is unmounted using `loader.removeSheet()`.

```jsx
import React, { useEffect } from 'react'
import loader from '@ibsheet/loader'
import { SheetSampleData } from '../shared/ibsheet-data'
const Page2 = () => {
  let sheetId = ''
  const sheetEl = 'sheetContainer'
  useEffect(() => {
    const { data, options } = SheetSampleData[1]
    loader.createSheet({
      el: sheetEl,
      options,
      data
    }).then(sheet => {
      // 주의: 해당 구간에서 데이터 조회를 하면 안됩니다. 데이터 조회는 onRenderFirstFinish 이벤트에서 실행해야합니다.
      sheetId = sheet.id;
      console.log('created sheet', sheet.id);
    });
    return () => {
      loader.removeSheet(sheetId)
    }
  }, [])
  return (
    <div>
      <p>page2 works!</p>
      <div id={ sheetEl }></div>
    </div>
  )
}
export default Page2
```

--------------------------------

### PageOne Component - Create and Remove Sheet

Source: https://ibsheet.github.io/loader-manual/docs/spa/vue

This component creates an IBSheet using the first sample data upon mounting and removes it before the component is unmounted. It ensures proper lifecycle management of the sheet.

```javascript
import loader from '@ibsheet/loader'
import { SheetSampleData } from '../shared/ibsheet-data'
let SHEET_ID = ''
export default {
  mounted() {
    const { data, options } = SheetSampleData[0]
    loader.createSheet({
      el: 'sheetContainer',
      options,
      data
    }).then((sheet) => {
      SHEET_ID = sheet.id
    });
  },
  beforeUnmount() {
    loader.removeSheet(SHEET_ID)
  }
}
```

--------------------------------

### Load IBSheet and handle sheetReady event

Source: https://ibsheet.github.io/loader-manual/docs/ibsheet/create-sheet

Loads the IBSheet library and provides access to the IBSheetStatic object once the configuration is complete. The `sheetReady` event fires when the library is ready.

```javascript
import loader from '@ibsheet/loader'
// setup loader configuration
loader.config({
  registry: [
    {
      name: 'ibsheet',
      baseUrl: '<publicpath>/ibsheet'
    }
  ]
})
// load ibsheet event sheetReady
loader.sheetReady(ibsheet => {
  // 'ibsheet', 'this': IBSheetStatic
})
```

--------------------------------

### #sheetReady

Source: https://ibsheet.github.io/loader-manual/docs/ibsheet/create-sheet

Allows creating a sheet directly from the IBSheetStatic object using the sheetReady function. sheetReady is triggered once when the config is complete.

```APIDOC
## #sheetReady

`sheetReady` 기능을 사용해서 `IBSheetStatic` 객체로부터 시트를 직접 생성할 수 있습니다. `config` 완료시 `sheetReady` 가 한 번 발생합니다.
```javascript
// get global loader instance
import loader from '@ibsheet/loader'
// setup loader configuration
loader.config({
  registry: [
    {
      name: 'ibsheet',
      baseUrl: '<publicpath>/ibsheet'
    }
  ]
})
// load ibsheet event sheetReady
loader.sheetReady(ibsheet => {
  // 'ibsheet', 'this': IBSheetStatic
})
```
```

--------------------------------

### PageTwo Component - Create and Remove Sheet

Source: https://ibsheet.github.io/loader-manual/docs/spa/vue

Similar to PageOne, this component creates an IBSheet using the second sample data upon mounting and removes it before unmounting. This demonstrates creating multiple sheets with different data.

```javascript
import loader from '@ibsheet/loader'
import { SheetSampleData } from '../shared/ibsheet-data'
let SHEET_ID = ''
export default {
  mounted() {
    const { data, options } = SheetSampleData[1]
    loader.createSheet({
      el: 'sheetContainer',
      options,
      data
    }).then((sheet) => {
      SHEET_ID = sheet.id
    });
  },
  beforeUnmount() {
    loader.removeSheet(SHEET_ID)
  }
}
```

--------------------------------

### Handle 'loaded' event

Source: https://ibsheet.github.io/loader-manual/docs/adv/events

The 'loaded' event is triggered after a library has successfully loaded. The event's 'target' property refers to the loaded RegistryItem.

```javascript
loader.once('loaded', evt => {
  const { target } = evt
  console.log('loaded item:', target.alias)
})
```

--------------------------------

### Load IBSheet Library

Source: https://ibsheet.github.io/loader-manual/docs/adv/load

Loads the IBSheet library. Ensure the `ibsheetLibrary` object is correctly defined with `name` and `baseUrl`. This is the basic usage for loading the library.

```javascript
// get global loader instance
import loader from '@ibsheet/loader'
// define ibsheet for loader registry
const ibsheetLibrary = {
  name: 'ibsheet',
  baseUrl: '<publicpath>/ibsheet'
}
// load ibsheet
loader.load(ibsheetLibrary)
```

--------------------------------

### Handle 'load-failed' event

Source: https://ibsheet.github.io/loader-manual/docs/adv/events

The 'load-failed' event is triggered if any library fails to load. The 'event.target' property indicates the failed RegistryItem, and 'event.error' contains the error object.

```javascript
loader.once('load-failed', evt => {
  const { target, error } = evt
  console.error('[LOAD_ERROR]', target.alias, error)
})
```

--------------------------------

### Custom Loading of a Library with IBSheetLoader

Source: https://ibsheet.github.io/loader-manual/docs/etc/external-lib

Manually load a configured library by its name using `loader.load()`. Pass `false` as the second argument to disable the default IBSheet library loading check.

```javascript
function customLoad(name) {
  // ibsheet 라이브러리 로드 체크기능을 사용하지 않으려면 호출시 두 번째 인자로 false를 전달해야 한다.
  loader.load(name, false)
}
```

--------------------------------

### Load Specific IBSheet Version using Registry

Source: https://ibsheet.github.io/loader-manual/docs/adv/load

Loads a specific version of the IBSheet library by pre-configuring the loader with a registry. This method is useful when you have multiple versions of IBSheet to manage. Ensure the `registry` is set up correctly before calling `loader.load()`.

```javascript
// get global loader instance
import loader from '@ibsheet/loader'
// define ibsheet libs for loader registry
const ibsheetLibrary1 = {
  name: 'ibsheet',
  baseUrl: '<publicpath>/ibsheet/v1'
  version: 1,
  // ...
}
const ibsheetLibrary2 = {
  name: 'ibsheet',
  baseUrl: '<publicpath>/ibsheet/v2'
  version: 2,
  // ...
}
// setup loader configuration
loader.config({
  registry: [
    ibsheetLibrary1,
    ibsheetLibrary2
  ]
})
// load ibsheet version 2
loader.load('ibsheet@2')
```

--------------------------------

### Handle 'load-complete' event

Source: https://ibsheet.github.io/loader-manual/docs/adv/events

The 'load-complete' event fires when all requested libraries have finished loading. The 'event.data' property contains an array of RegistryItem objects for the loaded libraries.

```javascript
loader
  .once('load-complete', evt => {
    const { data } = evt
    const items = data.map(item => item.alias).join(',')
    console.log('loaded items:', items)
  })
  .load([
    {
      name: 'swal2',
      url: 'https://cdn.jsdelivr.net/npm/sweetalert2@8',
      // 위와 같이 URL에 스크립트의 유형(파일확장자)이 포함되지 않은 경우
      // type 속성을 통해 지정해주어야 한다.
      type: 'js'
    },
    {
      name: 'pretty-checkbox',
      url: 'https://cdn.jsdelivr.net/npm/pretty-checkbox@3.0/dist/pretty-checkbox.min.css'
    },
    {
      name: 'font-awesome',
      url: 'https://kit.fontawesome.com/21c0a510fd.js',
      // FontAwesome5의 라이브러리 키트는 자체적으로 스크립트들을 동적으로 로드하므로
      // 아래와 같이 로드되는 스크립트들을 명시해주어야 unload시 함께 제거된다.
      dependentUrls: [
        'https://kit-free.fontawesome.com/releases/latest/css/free-v4-shims.min.css',
        'https://kit-free.fontawesome.com/releases/latest/css/free-v4-font-face.min.css',
        'https://kit-free.fontawesome.com/releases/latest/css/free.min.css'
      ]
    }],
    // 기본 라이브러리 체크기능을 사용하지 않기 위해 두 번째 인자로 false를 입력
    false)
```

--------------------------------

### Handle create-sheet event

Source: https://ibsheet.github.io/loader-manual/docs/ibsheet/create-sheet

Listens for the 'create-sheet' event, which fires when a sheet creation process is initiated. It provides access to the sheet's ID and creation options.

```javascript
loader.once('create-sheet', evt => {
  const { data } = evt
  console.log('create sheetId:', data.id)
})
```

--------------------------------

### Handle created-sheet event

Source: https://ibsheet.github.io/loader-manual/docs/ibsheet/create-sheet

Listens for the 'created-sheet' event, which fires upon successful sheet creation. The event target is the created IBSheetInstance, allowing immediate interaction.

```javascript
loader.once('created-sheet', evt => {
  const sheet = evt.target
  console.log('created sheetId:', sheet.id)
})
```

--------------------------------

### App.vue Template for Navigation

Source: https://ibsheet.github.io/loader-manual/docs/spa/vue

The template for `App.vue` includes navigation links using `router-link` and displays the version of the IBSheetLoader. It also includes a placeholder for routing views.

```html
<div>
  <p>@ibsheet/loader v{{loaderVersion}}</p>
  <div class="main-navs">
    <h3>Go to Pages:</h3>
    <ul>
      <li><router-link to="/">Home</router-link></li>
      <li><router-link to="/page1">Page1</router-link></li>
      <li><router-link to="/page2">Page2</router-link></li>
    </ul>
  </div>
  <div class="main">
    <router-view></router-view>
  </div>
</div>
```

--------------------------------

### Home Component TypeScript

Source: https://ibsheet.github.io/loader-manual/docs/spa/angular

The TypeScript file for the Home component. It ensures that any loaded IBSheet is unloaded when the component is initialized.

```typescript
import { Component, OnInit } from '@angular/core'
import loader from '@ibsheet/loader'
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  title = 'IBSheetLoader for Angular'
  ngOnInit() {
    loader.unload()
  }
}
```

--------------------------------

### Page1 Component TypeScript

Source: https://ibsheet.github.io/loader-manual/docs/spa/angular

The TypeScript file for Page1 component. It creates an IBSheet using the first sample data upon component initialization and removes the sheet when the component is destroyed.

```typescript
import { Component, OnInit, OnDestroy } from '@angular/core'
import loader from '@ibsheet/loader'
import { SheetSampleData } from '../shared/ibsheet-data'
@Component({
  selector: 'app-page1',
  templateUrl: './page1.component.html',
  styleUrls: ['./page1.component.css']
})
export class Page1Component implements OnInit, OnDestroy {
  sheetId = '';
  ngOnInit() {
    const A = this;
    const { options, data } = SheetSampleData[0]
    loader.createSheet({
      el: 'sheetContainer',
      options,
      data
    }).then((sheet: { id: any; }) => {
      // 주의: 해당 구간에서 데이터 조회를 하면 안됩니다. 데이터 조회는 onRenderFirstFinish 이벤트에서 실행해야합니다.
      A.sheetId = sheet.id;
      console.log('created sheet', sheet.id);
    })
  }
  ngOnDestroy() {
    loader.removeSheet(this.sheetId)
  }
}
```

--------------------------------

### Include IBSheetLoader via Browser Script Tag

Source: https://ibsheet.github.io/loader-manual/docs/basic/getting-started

Use this script tag to include the IBSheetLoader library directly in your HTML for browser usage.

```html
<script src="https://unpkg.com/@ibsheet/loader/dist/umd/ibsheet-loader.min.js"></script>
```

--------------------------------

### Handle Successful Chart Creation

Source: https://ibsheet.github.io/loader-manual/docs/ibchart/create-chart

Use the 'created-chart' event to execute code after a chart has been successfully created. The event target is the chart instance, allowing access to its methods.

```javascript
loader.once('created-chart', evt => {
  const chart = evt.target
  console.log('created chartId:', chart.getId())
})
```

--------------------------------

### Home Component HTML

Source: https://ibsheet.github.io/loader-manual/docs/spa/angular

The HTML template for the Home component. This component does not load IBSheet and unloads it if it was previously loaded.

```html
<div style="text-align:center">
  <h1>{{ title }}!</h1>
</div>
```
Tokens:
Raw