fix(types): Fix plugin's type definition

Generate type.d file on dist folder to make plugin modules
to resolve corresponding type definition file

Fix #2483

config/cjs.js

@@ -7,6 +7,4 @@ const content = {
 	"type": "commonjs"
 };
 
-writeJson(resolvePath("../dist/package.json", false), content, e => {
-	console.error(e);
-});
+writeJson(resolvePath("../dist/package.json", false), content);

config/const.json

@@ -0,0 +1,3 @@
+{
+    "pluginPrefix": "billboardjs-plugin"
+}

config/rollup/esm.js

@@ -7,6 +7,7 @@ import del from "rollup-plugin-delete";
 import {getBanner, readJson, resolvePath} from "../util.js";
 
 const pkg = readJson("package.json");
+const prefix = readJson("./const.json").pluginPrefix;
 const distPath = "dist-esm";
 
 const {plugin, production} = getBanner();
@@ -44,7 +45,7 @@ const bbPlugins = readdirSync(resolvePath("../src/Plugin/"), {
     .map(({name}) => ({
         input: `src/Plugin/${name}/index.ts`,
         output: {
-            file: `${distPath}/plugin/billboardjs-plugin-${name}.js`,
+            file: `${distPath}/plugin/${prefix}-${name}.js`,
             format: "es",
             banner: getBannerStr(true)
         },

config/banner.js → config/template/banner.js

@@ -1,4 +1,4 @@
-import {readJson} from "./util.js";
+import {readJson} from "../util.js";
 
 const pkg = readJson("package.json");
 

config/template/plugin.d.txt

@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2017 ~ present NAVER Corp.
+ * billboard.js project is licensed under the MIT license
+ */
+import PluginClass from "../../types/plugin/{=PLUGIN-NAME}";
+
+export default PluginClass;

config/type.d-plugin.js

@@ -0,0 +1,29 @@
+/**
+ * Generate plugin type definition file for dist folder.
+ * Note: Need to be executed after 'dist', 'dist-esm' folders are generated.
+ */
+import fs from "fs";
+import {resolvePath, readFile, readJson, writeFile} from "./util.js";
+
+const srcPath = resolvePath("../../src/Plugin/");
+const distPath = resolvePath("../../dist/plugin/");
+const distEsmPath = resolvePath("../../dist-esm/plugin/");
+
+// read plugin type template
+const template = readFile("./template/plugin.d.txt");
+
+// read the const to get plugin filename prefix
+const prefix = readJson("./const.json").pluginPrefix;
+
+// read the plugin directory
+fs.readdirSync(srcPath, {
+	withFileTypes: true
+})
+.filter(dirent => dirent.isDirectory())
+.forEach(({name}) => {
+	const fileName = `${prefix}-${name}.d.ts`;
+	const content = template.replace(/{=PLUGIN-NAME}/, name)
+
+	writeFile(`${distPath}/${fileName}`, content);
+	writeFile(`${distEsmPath}/${fileName}`, content);
+});

config/util.js

@@ -11,7 +11,7 @@ const __dirname = dirname(__filename);
  */
 function getBanner() {
     return JSON.parse(
-        execSync(`node ${resolvePath("./banner.js")}`, {encoding: "utf-8"})
+        execSync(`node ${resolvePath("./template/banner.js")}`, {encoding: "utf-8"})
     );
 }
 
@@ -34,26 +34,40 @@ function getBanner() {
 /**
  * Read json from the root of the project.
  * @param {string} path Path from the root
+ * @param {boolean} isJson If the value is JSON
  */
-function readJson(path) {
-    return JSON.parse(readFileSync(resolvePath(`../${path}`), "utf8"));
+function readFile(path, isJson = false) {
+    const res = readFileSync(resolvePath(`../${path}`), "utf8");
+
+    return isJson ? JSON.parse(res) : res;
 }
 
 /**
  * Write json to file
  * @param {string} target Path from the root
- * @param {object} json JSON object
+ * @param {object} value Value to write
+ * @param {boolean} isJson If the value is JSON
  */
-function writeJson(target, json) {
-    writeFileSync(target, JSON.stringify(json), e => {
+function writeFile(target, value, isJson = false) {
+    writeFileSync(target, isJson ? JSON.stringify(value) : value, {flag: "w"}, e => {
         console.error(e);
     });
 }
 
+function readJson(path) {
+    return readFile(path, true);
+}
+
+function writeJson(target, value) {
+    return writeFile(target, value, true);
+}
+
 export {
   __dirname,
   getBanner,
+  readFile,
   readJson,
   resolvePath,
+  writeFile,
   writeJson
 };

config/webpack/packaged.cjs

@@ -2,7 +2,7 @@ const {merge} = require("webpack-merge");
 const webpack = require("webpack");
 const TerserPlugin = require("terser-webpack-plugin");
 const terserConfig = require("../terserConfig.cjs");
-const banner = require("../banner.cjs");
+const banner = require("../template/banner.cjs");
 
 
 const config = {

config/webpack/plugin.cjs

@@ -5,29 +5,28 @@ const path = require("path");
 const CleanWebpackPlugin = require("clean-webpack-plugin").CleanWebpackPlugin;
 const TerserPlugin = require("terser-webpack-plugin");
 const terserConfig = require("../terserConfig.cjs");
-const banner = require("../banner.cjs");
+const banner = require("../template/banner.cjs");
 
 const srcPath = "./src/Plugin/";
 const distPath = path.resolve(__dirname, "../../dist/plugin/");
+const prefix = require("../const.json").pluginPrefix;
 
 // construct entry point
 const entry = {};
 
 fs.readdirSync(path.resolve(__dirname, `../../${srcPath}`), {
 	withFileTypes: true
-}).forEach(dirent => {
-	if (dirent.isDirectory()) {
-		const name = dirent.name;
-
+})
+	.filter(dirent => dirent.isDirectory())
+	.forEach(({name}) => {
 		entry[name] = `${srcPath}${name}/index.ts`;
-	}
-});
+	});
 
 const config = {
 	entry,
 	output: {
 		path: distPath,
-		filename: `billboardjs-plugin-[name].js`,
+		filename: `${prefix}-[name].js`,
 		library: ["bb", "plugin", "[name]"],
 		libraryExport: "default",
 		publicPath: "/dist/plugin"

config/webpack/production.cjs

@@ -4,7 +4,7 @@ const path = require("path");
 const CleanWebpackPlugin = require("clean-webpack-plugin").CleanWebpackPlugin;
 const TerserPlugin = require("terser-webpack-plugin");
 const terserConfig = require("../terserConfig.cjs");
-const banner = require("../banner.cjs");
+const banner = require("../template/banner.cjs");
 const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const ESLintPlugin = require("eslint-webpack-plugin");

config/webpack/theme.cjs

@@ -4,7 +4,7 @@ const fs = require("fs");
 const path = require("path");
 const CleanWebpackPlugin = require("clean-webpack-plugin").CleanWebpackPlugin;
 const WebpackCleanPlugin = require("webpack-clean");
-const banner = require("../banner.cjs");
+const banner = require("../template/banner.cjs");
 const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 

package.json

@@ -13,15 +13,15 @@
 			"require": "./dist/billboard.pkgd.js"
 		},
 		"./dist/plugin/*": {
-			"import": "./dist-esm/plugin/*.js",
-			"require": "./dist/plugin/pkgd/*.js"
+			"import": "./dist-esm/plugin/**/*",
+			"require": "./dist/plugin/pkgd/**/*"
 		},
 		"./dist/*": "./dist/*"
 	},
 	"scripts": {
 		"start": "webpack serve --open",
 		"start:plugin": "cross-env PLUGIN=true webpack-dev-server --open",
-		"build": "npm run build:production && npm run build:packaged && npm run build:theme && npm run build:plugin && npm run build:esm && npm run build:cjs",
+		"build": "npm run build:production && npm run build:packaged && npm run build:theme && npm run build:plugin && npm run build:esm && npm run build:cjs && npm run build:plugin:types",
 		"build:cjs": "node ./config/cjs.js",
 		"build:esm": "rollup -c ./config/rollup/esm.js",
 		"build:production": "cross-env NODE_ENV=production webpack",
@@ -30,7 +30,8 @@
 		"build:theme": "cross-env NODE_ENV=theme webpack",
 		"build:production:analyzer": "cross-env ANALYZER=true npm run build:production",
 		"build:packaged:analyzer": "cross-env ANALYZER=true npm run build:packaged",
-		"build:plugin": "cross-env NODE_ENV=plugin webpack && cross-env NODE_ENV=plugin MODE=min webpack &&  cross-env NODE_ENV=plugin MODE=pkgd webpack",
+		"build:plugin": "cross-env NODE_ENV=plugin webpack && cross-env NODE_ENV=plugin MODE=min webpack && cross-env NODE_ENV=plugin MODE=pkgd webpack",
+		"build:plugin:types": "node ./config/type.d-plugin.js",
 		"release": "semantic-release",
 		"lint": "npm run lint:types && eslint src --ext .ts",
 		"lint:types": "dtslint --onlyTestTsNext types",

types/plugin/tableview/index.d.ts

@@ -3,11 +3,11 @@
  * billboard.js project is licensed under the MIT license
  */
 import {Plugin} from "../plugin";
-import {TabieViewOptions} from "./options";
+import {TableViewOptions} from "./options";
 
-export default class TabieView extends Plugin {
+export default class TableView extends Plugin {
 	/**
 	 * Generate stanford diagram
 	 */
-	constructor(options?: TabieViewOptions);
+	constructor(options?: TableViewOptions);
 }

types/plugin/tableview/options.d.ts

@@ -1,4 +1,4 @@
-export interface TabieViewOptions {
+export interface TableViewOptions {
 	/**
 	 * Set tableview holder selector.
 	 * - **NOTE:** If not set, will append new holder element dynamically.