@lynx-js/cef-webview 0.0.1-alpha.4

package/README.md

@@ -0,0 +1,71 @@
+# @lynx-js/cef-webview
+
+A x-webview element implementation based on Chromium Embedded Framework (CEF) for Lynxtron.
+
+## Overview
+
+This library provides a CEF-based implementation of the x-webview element for Lynxtron applications. It allows you to embed Chromium-based web content within your Lynxtron app, providing a full-featured web browsing experience.
+
+## Installation
+
+```bash
+npm install @lynx-js/cef-webview
+```
+
+## Usage
+
+Enable the Lynxtron autolink plugin in your application build. AutoLink requires
+`@lynx-js/cef-webview/node-api`, which loads the current platform's Node-API
+addon so its static Lynx registrations run during startup. CEF itself is
+initialized only when you call `initialize()`.
+
+```ts
+import cefWebview from '@lynx-js/cef-webview/node-api';
+
+cefWebview.initialize();
+```
+
+Once initialized, you can use the x-webview element in your Lynx templates:
+
+```xml
+<x-webview src="https://www.example.com" width="100%" height="500px"></x-webview>
+```
+
+## Building
+
+### Prerequisites
+
+- Node.js >= 18
+- CMake
+- CEF SDK
+
+### Build Steps
+
+1. Clone the repository
+2. Install dependencies:
+   ```bash
+   npm install
+   ```
+3. Build the native addon:
+   ```bash
+   npx cmake-js build
+   ```
+
+## Dependencies
+
+- **Runtime Dependencies:**
+  - js-yaml
+  - plist
+
+- **Development Dependencies:**
+  - node-addon-api
+  - cmake-js
+  - lynxtron
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+## Authors
+
+Lynxtron Authors

package/index.cjs

@@ -0,0 +1,23 @@
+
+const path = require('path');
+const platform = process.platform;
+const arch = process.arch;
+
+const nativeBinding = require(path.join(
+  __dirname,
+  'dist',
+  platform,
+  arch,
+  'cef_extension.node',
+));
+
+function initialize(options = {}) {
+  return nativeBinding.initialize(options);
+}
+
+const cefWebview = {
+  initialize,
+};
+
+module.exports = cefWebview;
+module.exports.default = cefWebview;

package/lynx.lib.json

@@ -0,0 +1,7 @@
+{
+  "platforms": {
+    "node-api": {
+      "path": "node-api"
+    }
+  }
+}

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@lynx-js/cef-webview",
+  "author": "Lynxtron Authors",
+  "version": "0.0.1-alpha.4",
+  "type": "module",
+  "description": "a webview element based on cef",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/lynx-family/lynxtron.git"
+  },
+  "main": "index.cjs",
+  "exports": {
+    ".": "./index.cjs",
+    "./node-api": "./index.cjs",
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "postinstall": "node scripts/install.js"
+  },
+  "keywords": [
+    "lynx",
+    "cef",
+    "webview"
+  ],
+  "files": [
+    "index.cjs",
+    "lynx.lib.json",
+    "README.md",
+    "dist/**/*",
+    "scripts/**/*",
+    "utils/**/*"
+  ],
+  "dependencies": {
+    "js-yaml": "^4.1.1",
+    "plist": "^3.1.0",
+    "extract-zip": "2.0.1",
+    "node-fetch": "3.3.2"
+  },
+  "devDependencies": {
+    "node-addon-api": "^7.0.0",
+    "cmake-js": "^7.4.0",
+    "@lynx-js/lynxtron": "*"
+  },
+  "engines": {
+    "node": ">=22"
+  }
+}

package/scripts/install.js

@@ -0,0 +1,95 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { downloadBinary } from '../utils/download.js';
+import { BASE_URL, VERSION, ARCH, PLATFORM} from '../utils/env-config.js';
+import extractZip from 'extract-zip';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const CEF_WEBVIEW_PATH = path.join(__dirname, "..", "dist", PLATFORM, ARCH);
+
+const hasDownloadCefWebview = () => {
+  return fs.existsSync(CEF_WEBVIEW_PATH);
+}
+
+// if cef-webview is already installed, exit.
+if (hasDownloadCefWebview() && !process.env.npm_config_force_download) {
+  console.log("cef-webview is already installed");
+  process.exit(0);
+}
+
+if (process.env.npm_config_skip_cef_webview_download) {
+  console.log("skip cef-webview download by env");
+  process.exit(0);
+}
+
+const base_url = BASE_URL;
+
+let downloadUrl = ''
+if (process.env.npm_config_custom_cef_webview_binary_url) {
+  console.log(`using custom cef-webview url: ${process.env.npm_config_custom_cef_webview_binary_url}`);
+  downloadUrl = process.env.npm_config_custom_cef_webview_binary_url;
+} else {
+  if (!base_url) {
+    console.log("cef-webview base url is empty");
+    process.exit(0);
+  }
+  downloadUrl = `${base_url}/v${VERSION}/cef_webview-v${VERSION}-${PLATFORM}-${ARCH}.zip`
+}
+
+console.log(`downloading cef-webview from ${downloadUrl}`);
+
+const PACKAGE_DIR_PATH = path.join(__dirname, "..", "dist", PLATFORM, ARCH);
+const PACKAGE_PATH = path.join(PACKAGE_DIR_PATH, `${VERSION}.zip`);
+if (fs.existsSync(PACKAGE_PATH)) {
+  fs.rmSync(path.join(__dirname, "..", "dist"), { recursive: true, force: true });
+}
+fs.mkdirSync(PACKAGE_DIR_PATH, { recursive: true });
+
+await downloadBinary(downloadUrl, PACKAGE_PATH, { timeoutMs: 120000 });
+
+if (!fs.existsSync(PACKAGE_PATH)) {
+  throw new Error("cef-webview download failed");
+}
+
+// Begin extract zip file
+console.log(`Begin extract zip file: ${PACKAGE_PATH}`);
+
+try {
+  // Unzip file by extract-zip module
+  const TMP_DIR = path.join(CEF_WEBVIEW_PATH, '_tmp_extract');
+  if (!fs.existsSync(TMP_DIR)) {
+    fs.mkdirSync(TMP_DIR, { recursive: true });
+  }
+  await extractZip(PACKAGE_PATH, { dir: TMP_DIR });
+  const SRC_DIR = path.join(TMP_DIR, `cef_webview-v${VERSION}-${PLATFORM}-${ARCH}`);
+  const items = fs.readdirSync(SRC_DIR);
+  for (const item of items) {
+    const srcPath = path.join(SRC_DIR, item);
+    const destPath = path.join(CEF_WEBVIEW_PATH, item);
+    fs.renameSync(srcPath, destPath);
+  }
+  fs.rmSync(TMP_DIR, { recursive: true, force: true });
+  console.log('Unzip completed');
+
+  // Delete original zip file after unzip to release space
+  try {
+    fs.unlinkSync(PACKAGE_PATH);
+    console.log(`Deleted temporary zip file: ${PACKAGE_PATH}`);
+  } catch (deleteError) {
+    console.warn('Error deleting zip file:', deleteError);
+    // Here we don't throw an error because unzip is already successful, and delete failure does not affect the main function
+  }
+
+  // Verify unzip success
+  if (fs.existsSync(CEF_WEBVIEW_PATH)) {
+    console.log('Install success: cef-webview has been successfully downloaded and unzipped');
+  } else {
+    throw new Error(`Unzip failed: Expected executable file ${CEF_WEBVIEW_PATH} not found`);
+  }
+} catch (extractError) {
+  console.error('Error extracting zip file:', extractError);
+  throw new Error('Install failed: Error extracting zip file');
+}

package/utils/download.js

@@ -0,0 +1,72 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import fetch from 'node-fetch';
+
+/**
+ * Download binary file (arrayBuffer version)
+ * @param {string} url - URL of the file to download
+ * @param {string} outputPath - Output file path
+ * @param {Object} options - Download options
+ * @param {number} options.timeoutMs - Download timeout in milliseconds
+ * @returns {Promise<void>}
+ */
+export async function downloadBinary(url, outputPath, options = {}) {
+  const { timeoutMs = 120000 } = options;
+
+   // Ensure output directory exists
+  const outputDir = path.dirname(outputPath);
+  await fs.promises.mkdir(outputDir, { recursive: true });
+
+  const controller = new AbortController();
+  const signal = controller.signal;
+  const timeoutId = setTimeout(() => controller.abort(), timeoutMs);
+
+  try {
+    const response = await fetch(url, { signal });
+    clearTimeout(timeoutId);
+
+    if (!response.ok) {
+      throw new Error(`Download failed: HTTP ${response.status} ${response.statusText}`);
+    }
+
+     // Get content length if available
+    const contentLength = response.headers.get('content-length');
+    const totalBytes = contentLength ? parseInt(contentLength, 10) : null;
+
+    // Read to memory
+    const ab = await response.arrayBuffer();
+    const buffer = Buffer.from(ab);
+
+    // Write to file (synchronous one-time write)
+    await fs.promises.writeFile(outputPath, buffer);
+
+    // Console output progress information
+    if (totalBytes) {
+      process.stdout.write(`\nDownload completed: ${formatBytes(buffer.length)} / ${formatBytes(totalBytes)}\n`);
+    } else {
+      process.stdout.write(`\nDownload completed: ${formatBytes(buffer.length)}\n`);
+    }
+  } catch (error) {
+    clearTimeout(timeoutId);
+
+    // Clean up partially downloaded file
+    try {
+      await fs.promises.unlink(outputPath);
+    } catch (_) {
+      // Ignore cleanup failure
+    }
+
+    if (error.name === 'AbortError') {
+      throw new Error(`Download timeout: Exceeded ${timeoutMs} milliseconds`);
+    }
+    throw error;
+  }
+}
+
+export function formatBytes(bytes) {
+  if (bytes === 0) return '0 Bytes';
+  const k = 1024;
+  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
+}

package/utils/env-config.js

@@ -0,0 +1,17 @@
+import os from 'node:os';
+import path from 'node:path';
+import fs from 'node:fs';
+import { fileURLToPath } from 'node:url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+export const BASE_URL = 'https://github.com/lynx-family/lynxtron/releases/download/';
+
+const pckJson = JSON.parse(fs.readFileSync(path.join(__dirname, "..", 'package.json'), 'utf8'));
+
+export const VERSION = pckJson.version;
+
+export const ARCH = process.env.npm_config_arch || process.arch;
+
+export const PLATFORM = process.env.npm_config_platform || os.platform();