Skip to content

Commit

Permalink
feat: add debugPlugin & fix plugin types intellisense (#315)
Browse files Browse the repository at this point in the history
  • Loading branch information
LancelotLewis authored Mar 25, 2024
1 parent 4d483f9 commit b7101cc
Show file tree
Hide file tree
Showing 28 changed files with 192 additions and 52 deletions.
5 changes: 5 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
## 0.7.5 (2024-3-25)

- feat: support cache vite port in .env.development.local file
- feat: add debugPlugin & fix plugin types intellisense

## 0.7.4 (2024-3-20)

- fix(api): force use png format logo as favicon
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "create-blocklet",
"private": true,
"version": "0.7.4",
"version": "0.7.5",
"description": "",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
Expand Down
2 changes: 1 addition & 1 deletion packages/create-app/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "create-blocklet",
"version": "0.7.4",
"version": "0.7.5",
"exports": "./index.js",
"type": "module",
"repository": "[email protected]:blocklet/create-blocklet.git",
Expand Down
2 changes: 1 addition & 1 deletion packages/create-app/templates/react-dapp-ts/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@
"ts-node": "^10.9.2",
"typescript": "^5.3.3",
"vite": "^5.0.10",
"vite-plugin-blocklet": "^0.7.4",
"vite-plugin-blocklet": "^0.7.5",
"vite-plugin-svgr": "^4.2.0",
"zx": "^7.2.3"
},
Expand Down
2 changes: 1 addition & 1 deletion packages/create-app/templates/react-dapp/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@
"npm-run-all": "^4.1.5",
"prettier": "^3.1.1",
"vite": "^5.0.10",
"vite-plugin-blocklet": "^0.7.4",
"vite-plugin-blocklet": "^0.7.5",
"vite-plugin-svgr": "^4.2.0",
"zx": "^7.2.3"
}
Expand Down
2 changes: 1 addition & 1 deletion packages/create-app/templates/react-gun-dapp/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@
"prettier": "^3.1.1",
"rimraf": "^3.0.2",
"vite": "^5.0.10",
"vite-plugin-blocklet": "^0.7.4",
"vite-plugin-blocklet": "^0.7.5",
"vite-plugin-svgr": "^4.2.0",
"zx": "^7.2.3"
}
Expand Down
2 changes: 1 addition & 1 deletion packages/create-app/templates/react-static/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@
"prettier": "^3.1.1",
"rimraf": "^3.0.2",
"vite": "^5.0.10",
"vite-plugin-blocklet": "^0.7.4",
"vite-plugin-blocklet": "^0.7.5",
"vite-plugin-svgr": "^4.2.0",
"zx": "^7.2.3"
}
Expand Down
2 changes: 1 addition & 1 deletion packages/create-app/templates/solidjs-dapp/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
"prettier": "^3.1.1",
"rimraf": "^3.0.2",
"vite": "^5.0.10",
"vite-plugin-blocklet": "^0.7.4",
"vite-plugin-blocklet": "^0.7.5",
"vite-plugin-solid": "^2.8.0",
"zx": "^7.2.3"
},
Expand Down
2 changes: 1 addition & 1 deletion packages/create-app/templates/solidjs-static/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
"prettier": "^3.1.1",
"rimraf": "^3.0.2",
"vite": "^5.0.10",
"vite-plugin-blocklet": "^0.7.4",
"vite-plugin-blocklet": "^0.7.5",
"vite-plugin-solid": "^2.8.0",
"zx": "^7.2.3"
},
Expand Down
2 changes: 1 addition & 1 deletion packages/create-app/templates/svelte-dapp/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@
"rimraf": "^3.0.2",
"svelte": "^4.2.8",
"vite": "^5.0.10",
"vite-plugin-blocklet": "^0.7.4",
"vite-plugin-blocklet": "^0.7.5",
"zx": "^7.2.3"
},
"lint-staged": {
Expand Down
2 changes: 1 addition & 1 deletion packages/create-app/templates/svelte-static/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
"rimraf": "^3.0.2",
"svelte": "^4.2.8",
"vite": "^5.0.10",
"vite-plugin-blocklet": "^0.7.4",
"vite-plugin-blocklet": "^0.7.5",
"zx": "^7.2.3"
},
"lint-staged": {
Expand Down
2 changes: 1 addition & 1 deletion packages/create-app/templates/vue-dapp/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@
"prettier": "^3.1.1",
"rimraf": "^3.0.2",
"vite": "^5.0.10",
"vite-plugin-blocklet": "^0.7.4",
"vite-plugin-blocklet": "^0.7.5",
"zx": "^7.2.3"
},
"lint-staged": {
Expand Down
2 changes: 1 addition & 1 deletion packages/create-app/templates/vue-static/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
"prettier": "^3.1.1",
"rimraf": "^3.0.2",
"vite": "^5.0.10",
"vite-plugin-blocklet": "^0.7.4",
"vite-plugin-blocklet": "^0.7.5",
"zx": "^7.2.3"
},
"lint-staged": {
Expand Down
2 changes: 1 addition & 1 deletion packages/create-app/templates/vue2-dapp/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@
"prettier": "^3.1.1",
"rimraf": "^3.0.2",
"vite": "^5.0.10",
"vite-plugin-blocklet": "^0.7.4",
"vite-plugin-blocklet": "^0.7.5",
"zx": "^7.2.3"
},
"lint-staged": {
Expand Down
2 changes: 1 addition & 1 deletion packages/create-app/templates/vue2-static/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
"prettier": "^3.1.1",
"rimraf": "^3.0.2",
"vite": "^5.0.10",
"vite-plugin-blocklet": "^0.7.4",
"vite-plugin-blocklet": "^0.7.5",
"zx": "^7.2.3"
},
"lint-staged": {
Expand Down
36 changes: 25 additions & 11 deletions plugins/vite-plugin-blocklet/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,26 +3,32 @@ import createHmrPlugin from './libs/hmr.js';
import createConfigPlugin from './libs/config.js';
import createMetaPlugin from './libs/meta.js';
import createLoadingPlugin from './libs/loading.js';
import createDebugPlugin from './libs/debug.js';
import setupClient from './libs/client.js';

/**
* @typedef {{
* disableNodePolyfills?: boolean;
* disableConfig?: boolean;
* disableMeta?: boolean;
* disableHmr?: boolean;
* disableLoading?: boolean;
* Plugin options.
*
* loadingElementId?: string;
* loadingColor?: string;
* loadingImage?: string;
* }} PluginOptions
* @typedef {Object} PluginOptions
* @property {boolean} [disableNodePolyfills=false] - Disable node polyfills.
* @property {boolean} [disableConfig=false] - Disable config plugin.
* @property {boolean} [disableMeta=false] - Disable meta plugin.
* @property {boolean} [disableHmr=false] - Disable hmr plugin.
* @property {boolean} [disableLoading=false] - Disable loading plugin.
* @property {boolean} [disableDebug=false] - Disable debug plugin.
*
* @property {string} [loadingElementId]
* @property {string} [loadingColor]
* @property {string} [loadingImage]
* @property {'all'|'mobile'|'desktop'} [debugPlatform='mobile']
* @property {string} [debugScript]
*/

/**
* Create blocklet plugins.
*
* @param {PluginOptions} options
* @returns
* @returns {import('vite').Plugin[]}
*/
export function createBlockletPlugin(options = {}) {
const {
Expand All @@ -33,9 +39,13 @@ export function createBlockletPlugin(options = {}) {
disableMeta = false,
disableHmr = false,
disableLoading = false,
disableDebug = false,
...restOptions
} = options;

/** @type {import('vite').Plugin[]} */
const plugins = [];

if (!disableMeta) {
plugins.push(createMetaPlugin(restOptions));
}
Expand All @@ -51,6 +61,9 @@ export function createBlockletPlugin(options = {}) {
if (!disableLoading) {
plugins.push(createLoadingPlugin(restOptions));
}
if (!disableDebug) {
plugins.push(createDebugPlugin(restOptions));
}

return plugins;
}
Expand All @@ -61,5 +74,6 @@ export {
createConfigPlugin as createBlockletConfig,
createMetaPlugin as createBlockletMeta,
createLoadingPlugin as createBlockletLoading,
createDebugPlugin as createBlockletDebug,
nodePolyfills,
};
37 changes: 36 additions & 1 deletion plugins/vite-plugin-blocklet/libs/client.js
Original file line number Diff line number Diff line change
@@ -1,10 +1,24 @@
import fs from 'node:fs';
import path from 'node:path';
import getPort from 'get-port';
import { createServer } from 'vite';
import mri from 'mri';

const argv = process.argv.slice(2);
const isProduction = process.env.NODE_ENV === 'production' || process.env.ABT_NODE_SERVICE_ENV === 'production';

/**
* Sets up the client for the application.
*
* @param {Object} app - The application object.
* @param {Object} [options={}] - The options object.
* @param {string} [options.host='127.0.0.1'] - The host for the server.
* @param {string} [options.protocol='ws'] - The protocol for the server.
* @param {number} [options.port] - The port for the server.
* @param {string} [options.configFile=''] - The path to the config file.
* @param {string} [options.appType='spa'] - The type of the application.
* @return {Promise<Object>} A promise that resolves to the Vite server object.
*/
export default async function setupClient(app, options = {}) {
if (!isProduction) {
const params = mri(argv, {
Expand All @@ -13,7 +27,28 @@ export default async function setupClient(app, options = {}) {
},
});
const { host = '127.0.0.1', protocol = 'ws', port: inputPort, configFile = '', appType = 'spa' } = options;
const port = await getPort({ port: inputPort });
let skipWritePort = true;
let envAppendContent = '';
const envFile = path.join(process.cwd(), '.env.development.local');
let port;

if (!fs.existsSync(envFile)) {
skipWritePort = false;
port = await getPort({ port: inputPort });
envAppendContent = `VITE_BLOCKLET_PORT=${port}`;
} else {
port = await getPort({ port: inputPort });
const content = await fs.promises.readFile(envFile, 'utf-8');
if (!content.includes('VITE_BLOCKLET_PORT')) {
skipWritePort = false;
envAppendContent = `${content}\nVITE_BLOCKLET_PORT=${port}`;
} else {
port = process.env.VITE_BLOCKLET_PORT;
}
}
if (!skipWritePort && envAppendContent) {
await fs.promises.writeFile(envFile, envAppendContent);
}
// 以中间件模式创建 Vite 服务器
const vite = await createServer({
configFile: params.config || configFile || undefined,
Expand Down
4 changes: 2 additions & 2 deletions plugins/vite-plugin-blocklet/libs/config.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import fs from 'fs';
import path from 'path';
import fs from 'node:fs';
import path from 'node:path';
import YAML from 'yaml';
import { toBlockletDid, isInBlocklet } from './utils.js';

Expand Down
81 changes: 81 additions & 0 deletions plugins/vite-plugin-blocklet/libs/debug.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
import isMobile from 'ismobilejs';
import { isInBlocklet } from './utils.js';

/**
* Creates a config plugin for Vite development server.
*
* @param {object} options - The options for the plugin.
* @param {'all'|'mobile'|'desktop'} [options.debugPlatform='mobile'] - The platforms to enable debug mode for.
* @param {string} [options.debugScript] - The initialization code for the debug script.
* @return {object} The Vite config plugin.
*/
export default function createConfigPlugin(options) {
return {
name: 'blocklet:debug', // plugin name
/**
* Configure server
* @param {import('vite').ViteDevServer} server vite server
*/
configureServer(server) {
if (isInBlocklet) {
server.middlewares.use((req, res, next) => {
/**
* Enabled debug mode by platform
* @type {boolean}
*/
let enabled = false;
const debugPlatform = options.debugPlatform || 'mobile';
if (debugPlatform.includes('all')) {
enabled = true;
}
const isMobileFn = isMobile.default ? isMobile.default : isMobile;
if (isMobileFn(req.headers['user-agent']).any) {
if (debugPlatform.includes('mobile')) {
enabled = true;
}
} else {
if (debugPlatform.includes('desktop')) {
enabled = true;
}
}
if (enabled) {
try {
const url = new URL(req.url, 'http://localhost');
if (url.pathname === '/') {
url.searchParams.set('debug', '');
req.originalUrl = url.pathname + url.search;
}
} catch {}
}
return next();
});
}
},
/**
* Transform index html
* @param {string} html original html content
* @param {import('vite').IndexHtmlTransformContext} ctx vite context
* @returns {import('vite').IndexHtmlTransformResult}
*/
transformIndexHtml(html, ctx) {
const debugScript =
options.debugScript || "import('https://esm.run/vconsole').then(({ default: vConsole }) => new vConsole())";
try {
const url = new URL(ctx.originalUrl, 'http://localhost');
if (url.searchParams.has('debug')) {
return {
html,
tags: [
{
tag: 'script',
children: debugScript,
injectTo: 'body',
},
],
};
}
} catch {}
return html;
},
};
}
7 changes: 7 additions & 0 deletions plugins/vite-plugin-blocklet/libs/hmr.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,13 @@ import { version as viteVersion } from 'vite';
import semver from 'semver';
import { isInBlocklet } from './utils.js';

/**
* Creates a HMR plugin with the given options.
*
* @param {Object} options - The options for the HMR plugin.
* @param {string} options.version - The version of the vite version.
* @return {Object} The HMR plugin object.
*/
export default function createHmrPlugin(options = {}) {
const { version = viteVersion } = options;
return {
Expand Down
Loading

0 comments on commit b7101cc

Please sign in to comment.