[bazel-6] Convert docs build to basic webpack (#327)

Convert docs build to basic webpack

Co-authored-by: hborawski <[email protected]>

.bazelignore

@@ -62,4 +62,5 @@ tools/asset-testing-library/core/node_modules
 docs/storybook/node_modules
 plugins/reference-assets/mocks/node_modules
 tools/addon-storybook/node_modules
-tools/components/node_modules
+tools/components/node_modules
+docs/site/node_modules

.npmrc

@@ -1 +1,2 @@
+hoist=false
 registry=https://registry.npmjs.com

BUILD.bazel

@@ -1,9 +1,10 @@
 # load("@rules_player//cocoapods:cocoapod.bzl", "pod_push")
 # load("@rules_player//internal:stamp.bzl", "stamp")
 load("//tools/ios:util.bzl", "assemble_pod")
-
 load("@npm//:defs.bzl", "npm_link_all_packages")
 load("@aspect_rules_js//js:defs.bzl", "js_library")
+load("@bazel_gazelle//:def.bzl", "gazelle", "gazelle_binary")
+load("@rules_swift_package_manager//swiftpkg:defs.bzl", "swift_update_packages")
 
 package(default_visibility = ["//visibility:public"])
 
@@ -21,6 +22,7 @@ exports_files([
     ".editorconfig",
     ".all-contributorsrc",
     "README.md",
+    # "patches/@[email protected]",
 ])
 
 js_library(
@@ -94,7 +96,7 @@ js_library(
 # )
 
 exports_files([
-    "PlayerUI.podspec"
+    "PlayerUI.podspec",
 ])
 
 assemble_pod(
@@ -201,9 +203,6 @@ assemble_pod(
 #     ],
 # )
 
-load("@bazel_gazelle//:def.bzl", "gazelle", "gazelle_binary")
-load("@rules_swift_package_manager//swiftpkg:defs.bzl", "swift_update_packages")
-
 # Ignore the `.build` folder that is created by running Swift package manager
 # commands. The Swift Gazelle plugin executes some Swift package manager
 # commands to resolve external dependencies. This results in a `.build` file
@@ -236,11 +235,11 @@ gazelle_binary(
 swift_update_packages(
     name = "swift_update_pkgs",
     gazelle = ":gazelle_bin",
+    generate_swift_deps_for_workspace = True,
+    package_manifest = "./xcode/Package.swift",
     swift_deps = "swift_deps.bzl",
     swift_deps_index = "swift_deps_index.json",
-    generate_swift_deps_for_workspace = True,
     update_bzlmod_stanzas = False,
-    package_manifest = "./xcode/Package.swift"
 )
 
 # This target updates the Bazel build files for your project. Run this target

MODULE.bazel

@@ -58,6 +58,7 @@ npm.npm_translate_lock(
     pnpm_lock = "//:pnpm-lock.yaml",
     data = [
         "//:package.json",
+        "//:patches/@[email protected]",
     ],
     npmrc = "//:.npmrc",
     verify_node_modules_ignored = "//:.bazelignore",

docs/site/BUILD

@@ -1,66 +1,121 @@
-load("@npm//next:index.bzl", "next")
-load("@rules_player//javascript/next:next_build.bzl", "next_export")
+load("@npm//:defs.bzl", "npm_link_all_packages")
+load("@npm//:webpack-cli/package_json.bzl", webpack_bin = "bin")
+load("@npm//:webpack-dev-server/package_json.bzl", webpack_dev_server_bin = "bin")
 
-package(default_visibility = ["//visibility:public"])
+npm_link_all_packages(
+    name = "node_modules",
+)
 
 srcs = glob([
-  "public/**/*",
-  "pages/**/*",
-  "styles/*",
-  "components/**/*",
-  "plugins/*",
-  "utils/*",
-  "config/*",
+    "public/**/*",
+    "pages/**/*",
+    "styles/*",
+    "app/**/*",
+    "components/**/*",
+    "plugins/*",
+    "utils/*",
+    "config/*",
 ]) + [
-  "next.config.mjs",
-  "next-env.d.ts",
-  "tsconfig.json"
+    "package.json",
+    "tsconfig.json",
+    "webpack.config.ts",
+]
+
+build_deps = [
+    "//:typings",
+    "//:node_modules/webpack",
+    "//:node_modules/ts-loader",
+    "//:node_modules/ts-node",
+    "//:node_modules/html-webpack-plugin",
+    "//:node_modules/css-loader",
+    "//:node_modules/style-loader",
+    "//:node_modules/postcss-loader",
+    "//:node_modules/babel-loader",
+    "//:node_modules/@babel/preset-env",
+    "//:node_modules/@babel/preset-react",
+    "//:node_modules/copy-webpack-plugin",
+    "//:node_modules/terser-webpack-plugin",
 ]
 
-data = [
-  "//react/player:@player-ui/react",
-  "//plugins/reference-assets/react:@player-ui/reference-assets-plugin-react",
-  "@npm//typescript",
-  "@npm//@types/react",
-  "@npm//@types/node",
-  "@npm//@chakra-ui/react",
-  "@npm//@chakra-ui/skip-nav",
-  "@npm//@chakra-ui/icons",
-  "@npm//@docsearch/react",
-  "@npm//lunr",
-  "@npm//globby",
-  "@npm//react-icons",
-  "@npm//fs-extra",
-  "@npm//@mdx-js/loader",
-  "@npm//@mdx-js/react",
-  "@npm//react-syntax-highlighter",
-  "@npm//remark",
-  "@npm//remark-html",
-  "@npm//remark-smartypants",
-  "@npm//rehype-slug",
-  "@npm//rehype-autolink-headings",
-  "@npm//remove-markdown",
-  "@npm//github-slugger",
-  "@npm//gray-matter",
-  "@npm//nextjs-google-analytics"
+deps = [
+    ":node_modules/@player-ui/react",
+    ":node_modules/@player-ui/reference-assets-plugin-react",
+    ":node_modules/@player-ui/asset-provider-plugin-react",
+    "//:node_modules/typescript",
+    "//:node_modules/tslib",
+    "//:node_modules/@types/react",
+    "//:node_modules/@types/node",
+    # "//:node_modules/next",
+    "//:node_modules/tailwindcss",
+    "//:node_modules/tailwindcss-animate",
+    "//:node_modules/postcss",
+    "//:node_modules/autoprefixer",
+    "//:node_modules/@docsearch/react",
+    "//:node_modules/@docsearch/css",
+    "//:node_modules/@radix-ui/react-label",
+    "//:node_modules/@radix-ui/react-separator",
+    "//:node_modules/@radix-ui/react-slot",
+    "//:node_modules/class-variance-authority",
+    "//:node_modules/clsx",
+    "//:node_modules/@types/react-dom",
+    "//:node_modules/react-router",
+    "//:node_modules/react-router-dom",
+    "//:node_modules/path-browserify",
+    "//:node_modules/@types/path-browserify",
+    "//:node_modules/lucide-react",
+    "//:node_modules/tailwind-merge",
+    "//:node_modules/lunr",
+    "//:node_modules/@types/lunr",
+    "//:node_modules/globby",
+    "//:node_modules/react",
+    "//:node_modules/react-dom",
+    "//:node_modules/null-loader",
+    "//:node_modules/@chakra-ui/react",
+    "//:node_modules/@chakra-ui/skip-nav",
+    "//:node_modules/@chakra-ui/icons",
+    "//:node_modules/react-icons",
+    "//:node_modules/@mdx-js/loader",
+    "//:node_modules/@mdx-js/react",
+    "//:node_modules/@types/mdx-js__react",
+    "//:node_modules/react-syntax-highlighter",
+    "//:node_modules/@types/react-syntax-highlighter",
+    "//:node_modules/remark",
+    "//:node_modules/remark-html",
+    "//:node_modules/remark-smartypants",
+    "//:node_modules/rehype-slug",
+    "//:node_modules/rehype-autolink-headings",
+    "//:node_modules/remove-markdown",
+    "//:node_modules/github-slugger",
+    "//:node_modules/gray-matter",
+    # "//:node_modules/nextjs-google-analytics",
 ]
 
-next_export(
-  name = "site",
-  data = data,
-  srcs = srcs,
-  env = {
-    "NODE_ENV": "production",
-    # Need this b/c next will pull from env directly 
-    # This just maps to a value we can stamp w/ later on
-    "NEXT_PUBLIC_GA_MEASUREMENT_ID": "NEXT_PUBLIC_GA_MEASUREMENT_ID",
-  },
+webpack_bin.webpack_cli(
+    name = "site",
+    srcs = srcs + deps + build_deps,
+    args = [
+        "build",
+    ],
+    chdir = "docs/site",
+    env = {
+        "NODE_OPTIONS": "--loader ts-node/esm",
+        "NODE_ENV": "production",
+    },
+    out_dirs = ["dist"],
+    visibility = ["//visibility:public"],
 )
 
-next(
-  name = "start",
-  args = [
-    "dev", './docs/site'
-  ],
-  data = data + srcs,
-)
+webpack_dev_server_bin.webpack_dev_server_binary(
+    name = "start",
+    args = [],
+    chdir = package_name(),
+    data = srcs + deps + build_deps,
+    env = {
+        "NODE_OPTIONS": "--loader ts-node/esm",
+        "NODE_ENV": "development",
+    },
+    tags = [
+        "ibazel_notify_changes",
+    ],
+    visibility = ["//visibility:public"],
+)

docs/site/components/App.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { createRoot } from "react-dom/client";
+import { createBrowserRouter, RouterProvider } from "react-router-dom";
+import { ChakraProvider } from "@chakra-ui/react";
+
+import { PATH_TO_NAV } from "../config/navigation";
+import { Context } from "./Context";
+
+const router = createBrowserRouter([
+  {
+    path: "/",
+    Component: React.lazy(() => import("../pages")),
+  },
+  ...Array.from(PATH_TO_NAV.entries()).map(([path, nav]) => {
+    return {
+      path,
+      Component: React.lazy(() => import(`../pages${path}`)),
+    };
+  }),
+]);
+
+const node = document.getElementById("root") ?? document.createElement("div");
+
+if (!document.body.contains(node)) {
+  document.body.appendChild(node);
+}
+
+const root = createRoot(node);
+root.render(
+  <React.StrictMode>
+    <ChakraProvider>
+      <React.Suspense fallback={"loading..."}>
+        <Context>
+          <RouterProvider router={router} />
+        </Context>
+      </React.Suspense>
+    </ChakraProvider>
+  </React.StrictMode>,
+);

docs/site/components/Image.tsx

@@ -1,13 +1,13 @@
-import path from 'path';
+// import path from "path-browserify";
 
 export function withBasePrefix(location?: string): string | undefined {
   if (!location) {
     return location;
   }
 
-  if (process.env.NEXT_PUBLIC_BASE_PATH) {
-    return path.join(process.env.NEXT_PUBLIC_BASE_PATH, location);
-  }
+  // if (process.env.NEXT_PUBLIC_BASE_PATH) {
+  //   return path.join(process.env.NEXT_PUBLIC_BASE_PATH, location);
+  // }
 
   return location;
 }

docs/site/components/Layout/MDXPageLayout.tsx

@@ -1,9 +1,9 @@
-import * as React from 'react';
-import Head from 'next/head';
-import { Container, Flex } from '@chakra-ui/react';
-import { MDXProvider } from '@mdx-js/react';
-import { MDXComponents } from '../mdx-components';
-import { Page } from '../Page';
+import * as React from "react";
+// import Head from 'next/head';
+import { Container, Flex } from "@chakra-ui/react";
+import { MDXProvider } from "@mdx-js/react";
+import { MDXComponents } from "../mdx-components";
+import { Page } from "../Page";
 
 interface PageFrontmatter {
   title: string;
@@ -15,9 +15,9 @@ export default function withDocs(p: PageFrontmatter) {
   const LayoutHome = (props: React.PropsWithChildren<unknown>) => {
     return (
       <Page>
-        <Head>
+        {/* <Head>
           <title>Player - {p.title}</title>
-        </Head>
+        </Head> */}
         <Flex alignItems="center">
           <Container maxW="container.lg">
             <MDXProvider components={MDXComponents}>