[WIP] feat: codeblitz support code browsing

README.md

@@ -9,6 +9,7 @@
 - 🏗️ 支持一键部署
 - 🛠️ 支持二次集成开发，支持任意 npm registry
 - 🚀 基于 [Next.js](https://nextjs.org/docs/app/building-your-application/data-fetching) 纯静态部署
+- 🎉 使用 [CodeBlitz](https://github.com/opensumi/codeblitz) 进行代码浏览
 
 [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/cnpm/cnpmweb)
 

next.config.js

@@ -1,8 +1,186 @@
+// const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+// const styleLoader = require('style-loader');
+
+const path = require('path');
+
+const nextConfig = {
+ transpilePackages: [
+ '@codeblitzjs/ide-core',
+ '@codeblitzjs/ide-common',
+ '@codeblitzjs/ide-registry',
+ '@codeblitzjs/ide-sumi-core',
+ '@codeblitzjs/ide-plugin',
+ '@codeblitzjs/ide-i18n',
+
+ ],
+ env: {},
+ // https://github.com/vercel/next.js/issues/36251#issuecomment-1212900096
+ httpAgentOptions: {
+ keepAlive: false,
+ },
+ output: 'export',
+ lessLoaderOptions: {
+ lessOptions: {
+ javascriptEnabled: true,
+ paths: [
+ path.resolve(__dirname, 'node_modules', '@opensumi'),
+ path.resolve(__dirname, 'node_modules', '@codeblitzjs'),
+ ],
+ },
+ },
+
+ webpack: (config, options) => {
+ config.resolve.fallback = {
+ ...config.resolve.fallback,
+ fs: false,
+ net: false,
+ child_process: false,
+ http: false,
+ https: false,
+ path: require.resolve('path-browserify'),
+ os: require.resolve('os-browserify/browser'),
+ };
+ /**
+ * 配置 webpack 以支持服务端渲染 CodeBlitz
+ * 使用动态引入组件 vercel 预览失败 https://github.com/cnpm/cnpmweb/pull/64#issuecomment-1925669277
+ * TODO 目前
+ */
+ config.module.rules.push(
+ {
+ test: /\.module.less$/,
+ include: /@opensumi[\\/]ide|@codeblitzjs[\\/]ide/,
+ use: [
+ {
+ loader: 'style-loader',
+ options: {
+ esModule: false,
+ },
+ },
+ {
+ loader: 'css-loader',
+ options: {
+ importLoaders: 1,
+ sourceMap: true,
+ esModule: false,
+ modules: {
+ mode: 'local',
+ localIdentName: '[local]___[hash:base64:5]',
+ },
+ },
+ },
+ {
+ loader: 'less-loader',
+ options: {
+ lessOptions: {
+ javascriptEnabled: true,
+ },
+ },
+ },
+ ],
+ },
+ {
+ test: /\.less$/,
+ include: /@opensumi[\\/]ide|@codeblitzjs[\\/]ide/,
+ exclude: /\.module.less$/,
+ use: [
+ {
+ loader: 'style-loader',
+ options: {
+ esModule: false,
+ },
+ },
+ {
+ loader: 'css-loader',
+ options: {
+ importLoaders: 1,
+ sourceMap: true,
+ esModule: false,
+ modules: {
+ mode: 'local',
+ localIdentName: '[local]___[hash:base64:5]',
+ },
+ },
+ },
+ {
+ loader: 'less-loader',
+ options: {
+ lessOptions: {
+ javascriptEnabled: true,
+ },
+ },
+ },
+ ],
+ },
+ {
+ test: /\.css$/,
+ use: [
+ {
+ loader: 'style-loader',
+ options: {
+ esModule: false,
+ },
+ },
+ {
+ loader: 'css-loader',
+ options: {
+ esModule: false,
+ },
+ },
+ ],
+ },
+ {
+ test: /\.(png|jpe?g|gif|webp|ico|svg)(\?.*)?$/,
+ use: [
+ {
+ loader: 'url-loader',
+ options: {
+ limit: 10000,
+ name: '[name].[ext]',
+ // require 图片的时候不用加 .default
+ esModule: false,
+ fallback: {
+ loader: 'file-loader',
+ options: {
+ name: '[name].[ext]',
+ esModule: false,
+ },
+ },
+ },
+ },
+ ],
+ },
+ {
+ test: /\.(woff(2)?|ttf|eot)(\?v=\d+\.\d+\.\d+)?$/,
+ use: [
+ {
+ loader: 'file-loader',
+ options: {
+ name: '[name].[ext]',
+ esModule: false,
+ publicPath: './',
+ },
+ },
+ ],
+ },
+ {
+ test: /\.(txt|text|md)$/,
+ use: 'raw-loader',
+ },
+ );
+ return config;
+ },
+};
+
+// module.exports = nextConfig;
+
 module.exports = {
  env: {},
  // https://github.com/vercel/next.js/issues/36251#issuecomment-1212900096
  httpAgentOptions: {
  keepAlive: false,
  },
  output: 'export',
+ typescript: {
+ ignoreBuildErrors: true
+ }
 };

package.json

@@ -11,6 +11,7 @@
  "dependencies": {
  "@ant-design/cssinjs": "^1.11.1",
  "@ant-design/icons": "^5.2.5",
+ "@codeblitzjs/ide-core": "1.1.1-next-1710748243.0",
  "@gravatar/js": "^1.1.1",
  "@monaco-editor/loader": "^1.3.3",
  "@monaco-editor/react": "^4.4.2",
@@ -28,13 +29,18 @@
  "lodash": "^4.17.21",
  "marked": "^1.1.0",
  "next": "13.4.7",
+ "next-with-less": "^3.0.1",
+ "less": "^4.2.0",
+ "os-browserify": "^0.3.0",
+ "path-browserify": "^1.0.1",
  "npm-package-arg": "^11.0.1",
  "react": "18.2.0",
  "react-chartjs-2": "^5.2.0",
  "react-dom": "18.2.0",
  "react-icons": "^4.3.1",
  "semver": "^7.5.4",
- "swr": "^2.2.0"
+ "swr": "^2.2.0",
+ "rc-overflow": "^1.3.2"
  },
  "repository": "https://github.com/cnpm/cnpmweb.git",
  "devDependencies": {
@@ -43,7 +49,14 @@
  "@types/npm-package-arg": "^6.1.3",
  "@types/react": "18.2.14",
  "@types/semver": "^7.5.0",
+ "mini-css-extract-plugin": "^2.8.0",
  "prettier": "^3.0.3",
- "typescript": "5.3.3"
+ "typescript": "5.3.3",
+ "raw-loader": "^4.0.2",
+ "file-loader": "^6.2.0",
+ "less-loader": "^7.1.0",
+ "style-loader": "^3.3.4",
+ "css-loader": "^5.0.1",
+ "url-loader": "^4.1.1"
  }
 }

src/components/CustomTabs.tsx

@@ -1,9 +1,10 @@
 'use client';
-import { Tabs } from 'antd';
+import { Segmented, Space, Tabs } from 'antd';
 import Link from 'next/link';
 import NPMVersionSelect from './NPMVersionSelect';
 import { PackageManifest } from '@/hooks/useManifest';
 import { useRouter } from 'next/router';
+import { IDEModeName } from '@/hooks/useCodeBlitz';
 
 const presetTabs = [
  {
@@ -27,9 +28,13 @@ const presetTabs = [
 export default function CustomTabs({
  activateKey,
  pkg,
+ IDEMode,
+ setIDEMode,
 }: {
  activateKey: string;
  pkg: PackageManifest;
+ IDEMode: IDEModeName;
+ setIDEMode: (v: IDEModeName) => void;
 }) {
  const { push, query } = useRouter();
  const routerVersion = query.version as string;
@@ -40,20 +45,38 @@ export default function CustomTabs({
  activeKey={activateKey}
  type={'line'}
  tabBarExtraContent={
- <NPMVersionSelect
- versions={Object.keys(pkg?.versions || {})}
- tags={pkg?.['dist-tags']}
- targetVersion={targetVersion}
- setVersionStr={(v) => {
- if (v === pkg?.['dist-tags']?.latest) {
- push(`/package/${pkg.name}/${activateKey}`, undefined, { shallow: true });
- } else {
- push(`/package/${pkg.name}/${activateKey}?version=${v}`, undefined, {
- shallow: true,
- });
- }
- }}
- />
+ <div>
+ {activateKey === 'files' && (
+ <Space style={{ padding: '0 32px' }}>
+ <Segmented
+ size="small"
+ value={IDEMode}
+ options={[
+ { label: 'IDE', value: IDEModeName.IDE },
+ { label: 'Native', value: IDEModeName.NATIVE },
+ ]}
+ onChange={(v) => {
+ setIDEMode(v as IDEModeName);
+ }}
+ />
+ </Space>
+ )}
+
+ <NPMVersionSelect
+ versions={Object.keys(pkg?.versions || {})}
+ tags={pkg?.['dist-tags']}
+ targetVersion={targetVersion}
+ setVersionStr={(v) => {
+ if (v === pkg?.['dist-tags']?.latest) {
+ push(`/package/${pkg.name}/${activateKey}`, undefined, { shallow: true });
+ } else {
+ push(`/package/${pkg.name}/${activateKey}?version=${v}`, undefined, {
+ shallow: true,
+ });
+ }
+ }}
+ />
+ </div>
  }
  items={presetTabs.map((tab) => {
  return {

src/components/IDE/DynamicIDEComponent.tsx

@@ -0,0 +1,17 @@
+import dynamic from 'next/dynamic';
+
+export const DynamicIDEComponent = dynamic(
+ {
+ loader: async () => {
+ console.log('loading start IDE');
+ const IDEModule = await import('./IDE');
+ console.log('loading end IDE');
+ return IDEModule.IDE;
+ },
+ ssr: false,
+ },
+ {
+ loading: () => <div>loading...</div>,
+ ssr: false,
+ },
+);