build/webpack.base.conf.js

@@ -12,7 +12,8 @@ module.exports = {
   plugins: [
     new CopyPlugin({
       patterns: [
-        { from: "../react", to: "react" },
+        { from: "../react/dist/index.js", to: "react/index.js" },
+        { from: "../react/dist/index.d.ts", to: "react/index.d.ts" },
       ],
     })
   ],

package.json

@@ -7,7 +7,7 @@
     "/dist"
   ],
   "scripts": {
-    "build": "webpack --config build/webpack.prod.conf.js && webpack --config build/webpack.dev.conf.js",
+    "build": "rm -rf dist && cd react && yarn build && cd .. && webpack --config build/webpack.prod.conf.js && webpack --config build/webpack.dev.conf.js",
     "dev": "webpack --watch --config build/webpack.dev.conf.js",
     "test": "echo \"Error: no test specified\" && exit 1",
     "update-core": "yarn up @chartwerk/core && yarn up @chartwerk/core@latest"
@@ -30,5 +30,8 @@
     "webpack": "^5.87.0",
     "webpack-cli": "^5.1.4"
   },
-  "packageManager": "yarn@3.2.1"
+  "packageManager": "yarn@3.2.1",
+  "workspaces": [
+    "react/*"
+  ]
 }

react/build/webpack.base.conf.js

@@ -0,0 +1,26 @@
+const path = require('path');
+
+module.exports = {
+  entry: './src/index.tsx',
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: 'ts-loader',
+        exclude: /node_modules/,
+      },
+    ],
+  },
+  resolve: {
+    extensions: ['.tsx', '.ts', '.js'],
+  },
+  output: {
+    filename: 'index.js',
+    path: path.resolve(__dirname, '../dist'),
+    libraryTarget: 'umd',
+    umdNamedDefine: true,
+  },
+  externals: [
+    '@chartwerk/line-pod', 'react'
+  ]
+};

react/build/webpack.dev.conf.js

@@ -0,0 +1,8 @@
+const baseWebpackConfig = require('./webpack.base.conf');
+
+var conf = baseWebpackConfig;
+conf.devtool = 'inline-source-map';
+conf.mode = 'development';
+conf.output.filename = 'index.dev.js';
+
+module.exports = conf;

react/build/webpack.prod.conf.js

@@ -0,0 +1,6 @@
+const baseWebpackConfig = require('./webpack.base.conf');
+
+var conf = baseWebpackConfig;
+conf.mode = 'production';
+
+module.exports = baseWebpackConfig;

react/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "line-pod-react",
+  "version": "0.0.1",
+  "description": "React wrapper around line-pod",
+  "main": "dist/index.js",
+  "repository": "http://code.corpglory.net/chartwerk/line-pod.git",
+  "author": "CorpGlory Inc.",
+  "license": "ISC",
+  "scripts": {
+    "build": "webpack --config build/webpack.prod.conf.js",
+    "dev": "webpack --config build/webpack.dev.conf.js"
+  },
+  "dependencies": {
+    "@chartwerk/line-pod": "workspace:*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "ts-loader": "^9.5.1",
+    "typescript": "^5.4.3",
+    "webpack": "^5.87.0"
+  }
+}

react/src/index.tsx

@@ -2,7 +2,7 @@ import { LineTimeSerie, LineOptions, LinePod } from '@chartwerk/line-pod';
 import { MarkersConf } from '@chartwerk/line-pod/dist/models/marker';
 import { SegmentSerie } from '@chartwerk/line-pod/dist/models/segment';
 
-import { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 
 import _ from 'lodash';
 
@@ -66,7 +66,6 @@ export function ChartwerkLinePod(props: ChartwerkLinePodProps) {
     }
   }, 1);
 
-
   return (
     <div id={props.id} className={props.className} ref={chartRef}></div>
   );

react/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "rootDir": "./src",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "declaration": true,
+    "declarationDir": "dist",
+    "allowSyntheticDefaultImports": true,
+    "inlineSourceMap": false,
+    "sourceMap": true,
+    "noEmitOnError": false,
+    "emitDecoratorMetadata": false,
+    "experimentalDecorators": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": false,
+    "noImplicitUseStrict": false,
+    "noImplicitAny": false,
+    "noUnusedLocals": false,
+    "baseUrl": "./src",
+    "jsx": "react"
+  }
+}

tsconfig.json

@@ -19,6 +19,5 @@
     "noUnusedLocals": false,
     "baseUrl": "./src",
   },
-  "include": ["src/**/*"],
+  "include": ["src/**/*"]
-  "exclude": ["*.tsx"]
 }