refactor: refactor @idraw/renderer export

packages/renderer/examples/main.html

@@ -11,8 +11,8 @@
       <canvas id="canvas"></canvas>
     </div>
 
-    <script src="./../../../util/dist/index.global.js"></script>
-    <script src="./../../dist/index.global.min.js"></script>
+    <script src="./../../util/dist/index.global.js"></script>
+    <script src="./../dist/index.global.js"></script>
     <script type="module" src="./lib/main.js"></script>
   </body>
 </html>

packages/renderer/src/default.ts

@@ -0,0 +1,3 @@
+import { Renderer } from './index';
+
+export default Renderer;

packages/renderer/src/esm.ts

@@ -0,0 +1,5 @@
+import { Renderer } from './index';
+
+export * from './index';
+
+export default Renderer;

packages/renderer/src/index.ts

@@ -1,5 +1,5 @@
 import { TypeData, TypeContext, TypeElement, TypeElemDesc } from '@idraw/types';
-import util from '@idraw/util';
+import { createUUID, deepClone, Context } from '@idraw/util';
 import { drawContext } from './lib/draw';
 import { TypeLoadDataItem } from './lib/loader-event';
 import Loader from './lib/loader';
@@ -10,9 +10,6 @@ import {
 } from './names';
 
 const { requestAnimationFrame } = window;
-const { createUUID } = util.uuid;
-const { deepClone } = util.data;
-const { Context } = util;
 
 type QueueItem = { data: TypeData };
 enum DrawStatus {
@@ -31,7 +28,7 @@ type Options = {
   devicePixelRatio: number,
 }
 
-export default class Renderer extends RendererEvent {
+export class Renderer extends RendererEvent {
 
   private [_queue]: QueueItem[] = [];
   private [_ctx]: TypeContext | null = null;

packages/renderer/src/lib/draw/base.ts

@@ -3,9 +3,8 @@ import {
   // TypeElemDesc,
   TypeElement,
 } from '@idraw/types';
-import util  from '@idraw/util';
+import { is, istype, isColorStr } from '@idraw/util';
 import { rotateElement } from './../transform';
-const { is, istype, color } = util;
 
 export function clearContext(ctx: TypeContext) {
   // ctx.setFillStyle('rgb(0 0 0 / 100%)');
@@ -69,7 +68,7 @@ export function drawBoxBorder(
     }
     const bw = elem.desc.borderWidth;
     let borderColor = '#000000';
-    if (color.isColorStr(elem.desc.borderColor) === true) {
+    if (isColorStr(elem.desc.borderColor) === true) {
       borderColor = elem.desc.borderColor as string;
     }
     const x = elem.x - bw / 2;
@@ -83,7 +82,7 @@ export function drawBoxBorder(
       r = r + bw / 2;
     }
     const { desc } = elem;
-    if (desc.shadowColor !== undefined && color.isColorStr(desc.shadowColor)) {
+    if (desc.shadowColor !== undefined && isColorStr(desc.shadowColor)) {
       ctx.setShadowColor(desc.shadowColor);
     }
     if (desc.shadowOffsetX !== undefined && is.number(desc.shadowOffsetX)) {

packages/renderer/src/lib/draw/index.ts

@@ -4,7 +4,7 @@ import {
   TypeElement,
   // TypePoint,
 } from '@idraw/types';
-import util from '@idraw/util';
+import { isColorStr } from '@idraw/util';
 import Loader from '../loader';
 import { clearContext, drawBgColor } from './base';
 import { drawRect } from './rect';
@@ -14,8 +14,6 @@ import { drawHTML } from './html';
 import { drawText } from './text';
 import { drawCircle } from './circle';
 
-const { isColorStr } = util.color;
-
 export function drawContext(
   ctx: TypeContext,
   data: TypeData,

packages/renderer/src/lib/draw/text.ts

@@ -3,12 +3,11 @@ import {
   TypeElemDescText, 
   TypeElement,
 } from '@idraw/types';
-import util from '@idraw/util';
+import { is, isColorStr } from '@idraw/util';
 import Loader from '../loader';
 import { clearContext, drawBox } from './base';
 import { rotateElement } from './../transform';
-
-const { is, color } = util;
+ 
 
 export function drawText(
   ctx: TypeContext,
@@ -86,7 +85,7 @@ export function drawText(
       if (lines.length * fontHeight < elem.h) {
         _y += ((elem.h - lines.length * fontHeight) / 2);
       }
-      if (desc.textShadowColor !== undefined && color.isColorStr(desc.textShadowColor)) {
+      if (desc.textShadowColor !== undefined && isColorStr(desc.textShadowColor)) {
         ctx.setShadowColor(desc.textShadowColor);
       }
       if (desc.textShadowOffsetX !== undefined && is.number(desc.textShadowOffsetX)) {
@@ -111,7 +110,7 @@ export function drawText(
     }
 
     // draw text stroke
-    if (color.isColorStr(desc.strokeColor) && desc.strokeWidth !== undefined && desc.strokeWidth > 0) {
+    if (isColorStr(desc.strokeColor) && desc.strokeWidth !== undefined && desc.strokeWidth > 0) {
       let _y = elem.y;
       if (lines.length * fontHeight < elem.h) {
         _y += ((elem.h - lines.length * fontHeight) / 2);

packages/renderer/src/lib/loader.ts

@@ -1,11 +1,8 @@
 import { TypeData, TypeElement } from '@idraw/types';
-import util from '@idraw/util';
+import { loadImage, loadSVG, loadHTML, deepClone } from '@idraw/util';
 import { LoaderEvent, TypeLoadData, TypeLoaderEventArgMap } from './loader-event';
 import { filterScript } from './../util/filter';
 
-const { loadImage, loadSVG, loadHTML } = util.loader;
-const { deepClone } = util.data;
-
 type Options = {
   maxParallelNum: number
 }

packages/util/__tests__/index.test.ts

@@ -1,4 +1,4 @@
-import util from '../src/default';
+import util from '../src/default.js';
 
 const types = {
   'Context': 'Function',

packages/util/src/esm.ts

@@ -0,0 +1,3 @@
+export * from './index';
+
+export * as default from './index';

packages/util/src/index.ts

@@ -28,34 +28,3 @@ export {
   deepClone,
   Context,
 }
-
-// export default {
-//   is,
-//   check,
-//   time: {
-//     delay,
-//     compose,
-//     throttle,
-//   },
-//   loader: {
-//     loadImage,
-//     loadSVG,
-//     loadHTML,
-//   },
-//   file: {
-//     downloadImageFromCanvas,
-//   },
-//   color: {
-//     toColorHexStr,
-//     toColorHexNum,
-//     isColorStr,
-//   },
-//   uuid: {
-//     createUUID
-//   },
-//   istype,
-//   data: {
-//     deepClone,
-//   },
-//   Context: Context,
-// };

scripts/build-bundle.js

@@ -10,7 +10,7 @@ const pkgNames = packages.map((pkg) => {
 
 async function main() {
 
-  if (process.env.BUILD_MODE === 'reset') {
+  if (process.env.BUILD_MODE === 'reset' && !process.argv[2]) {
     pkgNames.forEach(async (name) => {
       const target = name;
       const pkgDir = path.resolve(`packages/${target}`);

scripts/rollup.config.js

@@ -55,7 +55,7 @@ for(let i = 0; i < packages.length; i++) {
       external,
     });
     modules.push({
-      input: resolveFile([pkg.dirName, 'src', 'default.ts']),
+      input: resolveFile([pkg.dirName, 'src', 'esm.ts']),
       output: resolveFile([pkg.dirName, 'dist', 'index.esm.js']),
       name: pkg.globalName,
       esModule: true,