Canner Schema Loader

Why do we need canner-schema-loader

CannerCMS 這個 component 是由 Provider 以及 Generator 兩個 component 所組合而成， Provider 負責處理資料的一切，包括儲存、快取、優化、發布、抓取資料等等，而 Generator 則負責渲染整個 CMS 的 UI。

在 Provider 中需要 jsonSchema 去做資料處理，在 Generator 中需要 componentTree 去渲染畫面，但 jsonSchema 以及 componentTree 都是由 canner-script 語法去產生, 為了簡化開發流程以及避免在執行階段做過多的運算，我們將這些步驟在 webpack 打包過程中做完。參考以下例子:

// webpack.config.js

loaders: [{
  test: 'canner.schema.js',
  loader: '@canner/canner.schema.js'
}]

canner.schema.js

module.exports = <root>
  <object keyName="info">
    <string keyName="name" title="Name" />
  </object>
</root>

CMS

import {CMS} from '@canner/react-cms-core';
// we can get a object including the `jsonSchema` and `componentTree`
import {jsonSchema, componentTree} from 'canner.schema.js';

//return part
return <CMS
  {...OtherProps}
  schema={{jsonSchema, componentTree}}
/>