fix(generator): more cleanup to plugin framework

[villebro]

SUMMARY

Changes:

• Add "dev" mode to npm scripts for automatic rebuilding to replace linking to source files. This removes the need for having a Webpack alias.
• Clean up README.md and add instructions for adding the plugin to Superset instead of as an embedded SuperChart
• Add new docs section for creating new viz plugins

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TESTING INSTRUCTIONS

1. go into the generator directory: cd superset-frontend/packages/generator-superset`
2. run npm link
3. create a new plugin directory: cd ~/src && mkdir superset-plugin-hello-world
4. initialize the plugin: yo @superset-ui/superset
5. Follow the instructions in the README.md file and see if you can make your plugin work

ADDITIONAL INFORMATION

• Has associated issue:
• Required feature flags:
• Changes UI
• Includes DB Migration (follow approval process in SIP-59)
  • Migration is atomic, supports rollback & is backwards-compatible
  • Confirm DB migration upgrade and downgrade tested
  • Runtime estimates and downtime expectations provided
• Introduces new feature or API
• Removes existing feature or API

[codecov]

Codecov Report

Merging #18027 (b262f59) into master (de8a1fa) will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##           master   #18027   +/-   ##
=======================================
  Coverage   66.36%   66.36%           
=======================================
  Files        1570     1570           
  Lines       61740    61740           
  Branches     6241     6241           
=======================================
  Hits        40972    40972           
  Misses      19170    19170           
  Partials     1598     1598           

Flag	Coverage Δ
javascript	50.92% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update de8a1fa...b262f59. Read the comment docs.

[villebro]

this is unfortunately needed due to the conflicting versions we currently have in our deps (React, AntD etc) 😏

[kgabryje]

We can also use --legacy-peer-deps, looks a bit less aggressive 😛

[villebro]

With --legacy-peer-deps, the React and the core packages won't be present due to them being peer dependencies, so running tests will fail:

npm run test

src/types.ts:19:68 - error TS2307: Cannot find module '@superset-ui/core' or its corresponding type declarations.

19 import { QueryFormData, supersetTheme, TimeseriesDataRecord } from '@superset-ui/core';
                                                                      ~~~~~~~~~~~~~~~~~~~

src/SupersetPluginChartHelloWorld.tsx:19:45 - error TS2307: Cannot find module 'react' or its corresponding type declarations.

19 import React, { useEffect, createRef } from 'react';
                                               ~~~~~~~

[zhaoyongjie]

I have tested in local environment. LGTM!

[zhaoyongjie]

Add some instructions on how to use this awesome plugin system:

1. Install yo in your local machine

npm i -g yo

2. Install and link @superset-ui/generator-superset

cd superset-frontend/packages/generator-superset
npm i
npm link

3. Check if the installation is successful

$ npm list -g
/Users/user-name/.nvm/versions/node/v16.9.1/lib
├── @superset-ui/generator-superset@0.18.25 -> ./../../../../../workspace/warehouse/superset/incubator-superset/superset-frontend/packages/generator-superset
├── corepack@0.9.0
├── npm@7.21.1
├── po2json@0.4.5
├── yarn@1.22.17
└── yo@4.3.0

4. Create a plugin directory

mkdir -p /tmp/superset-plugin-hello-world
cd /tmp/superset-plugin-hello-world

5. initialize the plugin

yo @superset-ui/superset

6. install and build superset-plugin-hello-world

npm i --force
npm run build

7. Install superset-plugin-hello-world into Superset

npm i -S /tmp/superset-plugin-hello-world

8. load customize the plugin. This is git-diff in my local machine

$ git diff
diff --git a/superset-frontend/package.json b/superset-frontend/package.json
index 439322dce..d9b87130b 100644
--- a/superset-frontend/package.json
+++ b/superset-frontend/package.json
@@ -195,6 +195,7 @@
     "rison": "^0.1.1",
     "scroll-into-view-if-needed": "^2.2.28",
     "shortid": "^2.2.6",
+    "superset-plugin-hello-world": "file:../../../../../superset-plugin-hello-world",
     "urijs": "^1.19.6",
     "use-immer": "^0.6.0",
     "use-query-params": "^1.1.9",
diff --git a/superset-frontend/src/visualizations/presets/MainPreset.js b/superset-frontend/src/visualizations/presets/MainPreset.js
index a32fbb2b7..1318bbb9c 100644
--- a/superset-frontend/src/visualizations/presets/MainPreset.js
+++ b/superset-frontend/src/visualizations/presets/MainPreset.js
@@ -80,6 +80,7 @@ import {
 import { PivotTableChartPlugin as PivotTableChartPluginV2 } from '@superset-ui/plugin-chart-pivot-table';
 import FilterBoxChartPlugin from '../FilterBox/FilterBoxChartPlugin';
 import TimeTableChartPlugin from '../TimeTable/TimeTableChartPlugin';
+import { SupersetPluginHelloWorld } from 'superset-plugin-hello-world';

 export default class MainPreset extends Preset {
   constructor() {
@@ -164,6 +165,7 @@ export default class MainPreset extends Preset {
         new TimeColumnFilterPlugin().configure({ key: 'filter_timecolumn' }),
         new TimeGrainFilterPlugin().configure({ key: 'filter_timegrain' }),
         new EchartsTreeChartPlugin().configure({ key: 'tree_chart' }),
+        new SupersetPluginHelloWorld().configure({ key: 'hello_world'}),
         ...experimentalplugins,
       ],
     });

9. run development server in Superset

npm run dev-server

[rusackas]

Looks like the main readme here needs some love, too. It still references superset-ui and all of that :D