feat(extensions): code-first frontend contributions (#38346)

superset-extensions-cli/src/superset_extensions_cli/cli.py

@@ -42,6 +42,7 @@ from superset_extensions_cli.exceptions import ExtensionNameError
 from superset_extensions_cli.types import ExtensionNames
 from superset_extensions_cli.utils import (
     generate_extension_names,
+    get_module_federation_name,
     kebab_to_snake_case,
     read_json,
     read_toml,
@@ -152,11 +153,12 @@ def build_manifest(cwd: Path, remote_entry: str | None) -> Manifest:
     composite_id = f"{extension.publisher}.{extension.name}"
 
     frontend: ManifestFrontend | None = None
-    if extension.frontend and remote_entry:
+    if remote_entry:
         frontend = ManifestFrontend(
-            contributions=extension.frontend.contributions,
-            moduleFederation=extension.frontend.moduleFederation,
             remoteEntry=remote_entry,
+            moduleFederationName=get_module_federation_name(
+                extension.publisher, extension.name
+            ),
         )
 
     backend: ManifestBackend | None = None

superset-extensions-cli/src/superset_extensions_cli/templates/extension.json.j2

@@ -4,20 +4,6 @@
   "displayName": "{{ display_name }}",
   "version": "{{ version }}",
   "license": "{{ license }}",
-  {% if include_frontend -%}
-  "frontend": {
-    "contributions": {
-      "commands": [],
-      "views": {},
-      "menus": {},
-      "editors": []
-    },
-    "moduleFederation": {
-      "name": "{{ mf_name }}",
-      "exposes": ["./index"]
-    }
-  },
-  {% endif -%}
   {% if include_backend -%}
   "backend": {
     "entryPoints": ["{{ backend_entry }}"],

superset-extensions-cli/src/superset_extensions_cli/templates/frontend/src/index.tsx.j2

@@ -1,13 +1,8 @@
 import React from "react";
-import { core } from "@apache-superset/core";
+import { views } from "@apache-superset/core";
 
-export const activate = (context: core.ExtensionContext) => {
-  context.disposables.push(
-    core.registerViewProvider("{{ id }}.example", () => <p>{{ name }}</p>)
-  );
-  console.log("{{ name }} extension activated");
-};
-
-export const deactivate = () => {
-  console.log("{{ name }} extension deactivated");
-};
+views.registerView(
+  { id: "{{ id }}.example", name: "{{ display_name }}" },
+  "sqllab.panels",
+  () => <p>{{ display_name }}</p>,
+);

superset-extensions-cli/src/superset_extensions_cli/templates/frontend/webpack.config.js.j2

@@ -1,6 +1,7 @@
 const path = require("path");
 const { ModuleFederationPlugin } = require("webpack").container;
 const packageConfig = require("./package");
+const extensionConfig = require("../extension.json");
 
 module.exports = (env, argv) => {
   const isProd = argv.mode === "production";
@@ -19,7 +20,7 @@ module.exports = (env, argv) => {
       filename: isProd ? undefined : "[name].[contenthash].js",
       chunkFilename: "[name].[contenthash].js",
       path: path.resolve(__dirname, "dist"),
-      publicPath: `/api/v1/extensions/{{ publisher }}/{{ name }}/`,
+      publicPath: `/api/v1/extensions/${extensionConfig.publisher}/${extensionConfig.name}/`,
     },
     resolve: {
       extensions: [".ts", ".tsx", ".js", ".jsx"],