glass-easel-devtools-panel 0.9.0

package/src/pages/tree/element.wxss

@@ -0,0 +1,113 @@
+@import url('../common.wxss');
+
+@keyframes update-ani {
+  from {
+    background: @update-bg;
+  }
+  to {
+    background: transparent;
+  }
+}
+.updated {
+  background: @update-bg;
+  animation-duration: 1s;
+  animation-fill-mode: both;
+  animation-name: update-ani;
+  animation-timing-function: ease;
+}
+
+:host {
+  display: block;
+}
+
+.tag {
+  color: @common-text;
+  white-space: nowrap;
+}
+
+.fold-arrow {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  line-height: 1em;
+  color: #444;
+  text-align: center;
+}
+.fold-arrow-icon {
+  width: 1em;
+  transition: transform 200ms ease;
+}
+.fold-arrow-icon_open {
+  transform: rotate(90deg);
+}
+
+.tag-body {
+  display: inline-block;
+}
+.tag-body_hover {
+  background: @hover-bg;
+}
+.tag-body_selected {
+  background: @selected-bg;
+}
+.tag-body_highlight {
+  background-color: rgba(0, 128, 192, 0.25);
+}
+.tag-text {
+  display: inline;
+}
+.tag-name {
+  display: inline-block;
+  color: @tag-name;
+}
+
+.tag-var-name-wrapper {
+  display: inline;
+}
+.tag-var-name {
+  display: inline-block;
+  margin-left: 0.25em;
+  height: 1em;
+  line-height: 1em;
+  min-width: 1em;
+  text-align: center;
+  font-size: 0.8em;
+  font-style: italic;
+  color: @important-text;
+}
+.tag-var-name_hover {
+  background: @hover-bg;
+}
+
+.attribute {
+  display: inline-block;
+  margin-left: 0.5em;
+}
+.attribute-name {
+  display: inline-block;
+  color: @core-attribute-name;
+}
+.attribute-name_property {
+  color: @property-name;
+}
+.attribute-value {
+  display: inline-block;
+  color: @attribute-value;
+}
+
+.children {
+  margin-left: 1em;
+}
+
+.virtual-tag-name {
+  display: inline-block;
+  font-style: italic;
+}
+.virtual-tag-name_hover {
+  background: @selected-bg;
+}
+
+.text-content {
+  color: @important-text;
+  padding: 1px 0;
+}

package/src/utils.ts

@@ -0,0 +1,16 @@
+export declare const DEV: boolean
+
+export const error = (msg: string, ...args: unknown[]) => {
+  // eslint-disable-next-line no-console
+  console.error(`[glass-easel-miniprogram-panel] ${msg}`, ...args)
+}
+
+export const warn = (msg: string, ...args: unknown[]) => {
+  // eslint-disable-next-line no-console
+  console.warn(`[glass-easel-miniprogram-panel] ${msg}`, ...args)
+}
+
+export const debug = (msg: string, ...args: unknown[]) => {
+  // eslint-disable-next-line no-console
+  if (DEV) console.debug(`[glass-easel-miniprogram-panel] ${msg}`, ...args)
+}

package/src.d.ts

@@ -0,0 +1,10 @@
+import type * as adapter from 'glass-easel-miniprogram-adapter'
+
+export declare const env: adapter.MiniProgramEnv
+export declare const codeSpace: adapter.CodeSpace
+export declare const registerGlobalEventListener: (
+  backend: adapter.glassEasel.GeneralBackendContext,
+) => void
+export declare const initWithBackend: (
+  backend: adapter.glassEasel.GeneralBackendContext,
+) => adapter.AssociatedBackend

package/tsconfig.json

@@ -0,0 +1,11 @@
+{
+    "extends": "../tsconfig.json",
+    "compilerOptions": {
+        "declaration": true,
+        "declarationDir": "dist"
+    },
+    "include": [
+        "src/**/*.ts",
+        "typings"
+    ]
+}

package/typings/miniprogram.d.ts

@@ -0,0 +1,6 @@
+import type { PageConstructor, ComponentConstructor } from 'glass-easel-miniprogram-adapter'
+
+declare global {
+  const Page: PageConstructor
+  const Component: ComponentConstructor
+}

package/webpack.config.js

@@ -0,0 +1,79 @@
+/* eslint-disable import/no-extraneous-dependencies */
+/* eslint-disable @typescript-eslint/no-var-requires */
+
+const path = require('path')
+const { DefinePlugin } = require('webpack')
+const {
+  GlassEaselMiniprogramWebpackPlugin,
+  GlassEaselMiniprogramWxmlLoader,
+  GlassEaselMiniprogramWxssLoader,
+} = require('glass-easel-miniprogram-webpack-plugin')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+
+module.exports = [
+  {
+    mode: 'production',
+    entry: './src/bootstrap.ts',
+    output: {
+      filename: 'bootstrap.js',
+      path: path.join(__dirname, 'dist'),
+      library: {
+        type: 'commonjs2',
+      },
+    },
+    devtool: 'inline-source-map',
+    resolve: {
+      extensions: ['.ts', '.js'],
+      alias: {
+        'glass-easel': 'glass-easel',
+      },
+    },
+    module: {
+      rules: [
+        {
+          test: /\.ts$/,
+          loader: 'ts-loader',
+          exclude: /node_modules/,
+        },
+        {
+          // wxml should be explicit handled with a loader
+          test: /\.wxml$/,
+          use: GlassEaselMiniprogramWxmlLoader,
+          exclude: /node_modules/,
+        },
+        {
+          // wxss should be explicit handled like CSS
+          test: /\.wxss$/,
+          use: [
+            MiniCssExtractPlugin.loader,
+            'css-loader',
+            GlassEaselMiniprogramWxssLoader,
+            // Add more loaders here if you work with less, sass, Stylus, etc.
+            // Currently `@import` does not work well without a preprocessor (such as `less`).
+            // This is a bug (#113) and will be fixed in future.
+            'less-loader',
+          ],
+          exclude: /node_modules/,
+        },
+      ],
+    },
+    performance: {
+      hints: false,
+      maxEntrypointSize: 4 * 1024 * 1024,
+      maxAssetSize: 4 * 1024 * 1024,
+    },
+    plugins: [
+      new DefinePlugin({
+        DEV: 'false',
+      }),
+      new MiniCssExtractPlugin({
+        filename: 'index.css',
+      }),
+      new GlassEaselMiniprogramWebpackPlugin({
+        path: path.join(__dirname, 'src'),
+        resourceFilePattern: /\.(jpg|jpeg|png|gif)$/,
+        customBootstrap: true,
+      }),
+    ],
+  },
+]

package/webpack.dev.config.js

@@ -0,0 +1,12 @@
+/* eslint-disable import/no-extraneous-dependencies */
+/* eslint-disable @typescript-eslint/no-var-requires */
+
+const { DefinePlugin } = require('webpack')
+const config = require('./webpack.config')
+
+config[0].mode = 'development'
+config[0].devtool = 'inline-source-map'
+config[0].plugins[0] = new DefinePlugin({ DEV: 'true' })
+// config[0].resolve.alias['glass-easel'] = 'glass-easel/dist/glass_easel.dev.all.es.js'
+
+module.exports = config