Kraken

https://openkraken.com/guide
Admin
Kraken is a high-performance, W3C-compliant rendering engine built on top of Flutter, allowing...
Tokens:23,645
Snippets:254
Trust Score:6.3
Update:1 month ago
Show doc for...
Tokens:
Raw
### Install and Start Development Server

Source: https://openkraken.com/guide/development/rax

Navigate to the project directory, install dependencies, and start the development server.

```bash
cd <YourProjectName>
npm install
npm start
```

--------------------------------

### Run Kraken example application

Source: https://openkraken.com/guide/contribute/development

Starts the Kraken example application using the Flutter CLI.

```bash
flutter run
```

--------------------------------

### Install dependencies

Source: https://openkraken.com/guide/native/interpolation-flutter

Run the command to fetch and install the specified dependencies.

```bash
flutter pub get
```

--------------------------------

### Install Dependencies and Build

Source: https://openkraken.com/guide/development/vue

Commands to install project dependencies and generate the production bundle.

```bash
npm i
npm run build
```

--------------------------------

### Install Kraken CLI on macOS

Source: https://openkraken.com/guide/faq

Use this command to install the Kraken CLI globally on macOS when standard installation fails.

```bash
sudo npm install -g @openkraken/cli --unsafe-perm
```

--------------------------------

### HTML Entry Point Example

Source: https://openkraken.com/guide/advanced/html

A basic HTML structure demonstrating how to define a Kraken application layout and include JavaScript execution within an HTML file.

```html
<html>
  <head>
    <title>Kraken App</title>
  </head>
  <body>
    <div
      style="box-sizing: border-box; display: flex; flex-direction: column; flex-shrink: 0; align-content: flex-start; border-width: 0vw; border-style: solid; border-color: black; margin: 26.6667vw 0vw 0vw; padding: 0vw; min-width: 0vw; align-items: center;"
    >
      <img
        src="https://img.alicdn.com/imgextra/i1/O1CN01CUE2IL1FdAGnYPawX_!!6000000000509-2-tps-350-116.png"
        style="height: 24vw; margin-bottom: 2.6667vw;"
      />
      <span
        style="box-sizing: border-box; display: block; font-size: 6vw; white-space: pre-wrap; font-weight: bold; margin: 2.6667vw 0vw;"
        >Welcome to Your Kraken App</span
      >
      <span
        style="box-sizing: border-box; display: block; font-size: 4.8vw; white-space: pre-wrap; margin: 1.0667vw 0vw; color: rgb(85, 85, 85);"
        >More information about Kraken</span
      >
      <span
        style="box-sizing: border-box; display: block; font-size: 4.8vw; white-space: pre-wrap; margin: 1.0667vw 0vw; color: rgb(85, 85, 85);"
        >Visit http://openkraken.com/</span
      >
    </div>
    <script>
      console.log('eval JavaScript!');
    </script>
  </body>
</html>
```

--------------------------------

### Create and Interact with Custom Container Element

Source: https://openkraken.com/guide/advanced/widget-custom-element

JavaScript examples for creating the registered custom container and listening for its events.

```javascript
const flutterContainer = document.createElement('flutter-container');
```

```javascript
flutterContainer.addEventListener('refresh', () => {});
```

--------------------------------

### Install CMake on macOS

Source: https://openkraken.com/guide/contribute/environment

Install the CMake build tool using Homebrew on macOS.

```bash
brew install cmake
```

--------------------------------

### Development Server Output

Source: https://openkraken.com/guide/development/rax

Expected console output after starting the Rax development server.

```text
> @rax-materials/scaffolds-app-js@0.1.0 start
> rax-app start


[Web] Development server at:
http://localhost:3333/home.html
http://[your.ip]:3333/home.html


[Kraken] Development server at:
http://[your.ip]:3333/kraken/home.js


[Kraken] Run Play Kraken App:
kraken http://[your.ip]:3333/kraken/home.js
```

--------------------------------

### Display a Video in Kraken

Source: https://openkraken.com/guide/basic/multimedia

Use the <video> tag to render video content. This requires the installation of the kraken_video_player plugin.

```jsx
<div>
  <video
    src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
    autoplay={true}
    style={{ width: '100%', height: '200px' }}
  />
</div>
```

--------------------------------

### Build JS Bridge for all platforms

Source: https://openkraken.com/guide/contribute/development

Executes the build process for the JS Bridge across supported platforms. Ensure all build dependencies are installed before running.

```bash
npm run build:bridge:all
```

--------------------------------

### Manage Component State

Source: https://openkraken.com/guide/development/vue

Example of managing local component state using the data property in a Vue component.

```vue
<template>
  <div>
    <button v-on:click="counter += 1">Add 1</button>
    <p>The button above has been clicked {{ counter }} times.</p>
  </div>
</template>


<script>
  export default {
    name: 'App',
    data() {
      return {
        counter: 0,
      };
    },
  };
</script>
```

--------------------------------

### Initialize a Rax Project

Source: https://openkraken.com/guide/development/rax

Use the npm init command to scaffold a new Rax application.

```bash
npm init rax <YourProjectName>
```

--------------------------------

### 运行不同框架的 Kraken 应用

Source: https://openkraken.com/guide

使用 Kraken CLI 运行预构建的 Rax、Vue 或 React 应用包。

```bash
kraken http://kraken.oss-cn-hangzhou.aliyuncs.com/demo/demo-rax.js
```

```bash
kraken http://kraken.oss-cn-hangzhou.aliyuncs.com/demo/demo-vue.js
```

```bash
kraken http://kraken.oss-cn-hangzhou.aliyuncs.com/demo/demo-react.js
```

--------------------------------

### Create a new Flutter project

Source: https://openkraken.com/guide/native/interpolation-flutter

Initialize a new Flutter application and navigate into the project directory.

```bash
flutter create myapp
cd myapp
```

--------------------------------

### Clone and Prepare Kraken Vue Demo

Source: https://openkraken.com/guide/development/vue

Commands to clone the sample repository and navigate to the Vue demo directory.

```bash
git clone https://github.com/openkraken/samples.git
cd ./demos/hello-vue
```

--------------------------------

### 监听底层触摸事件

Source: https://openkraken.com/guide/basic/touch

使用 touchstart、touchmove 和 touchend 事件监听触摸交互的全过程。

```javascript
const root = document.getElementById('root');


root.addEventListener('touchstart', e => {
  // 开始触摸
});


root.addEventListener('touchmove', e => {
  // 触摸后开始移动
});


root.addEventListener('touchend', e => {
  // 结束触摸（手或触摸笔等离开屏幕）
});
```

--------------------------------

### Perform HTTP GET Request with Fetch API

Source: https://openkraken.com/guide/basic/network

Uses the standard Fetch API to retrieve data from a remote URL.

```javascript
fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(json => console.log(json));
```

--------------------------------

### 通过命令行转换 JavaScript 文件

Source: https://openkraken.com/guide/advanced/use-quickjs-bytecode

使用 qjsc 命令将指定的 JavaScript 源文件转换为 .kbc1 格式的字节码文件。

```bash
qjsc -s /path/to/source.js -d ./
```

--------------------------------

### 编译与注册插件

Source: https://openkraken.com/guide/advanced/custom-js-api

使用 kraken-cli 将 JS 代码转换为 Bytecode，并在应用初始化时进行注册。

```bash
kraken qjsc ./lib/my_plugin.js ./lib/my_plugin_qjsc.dart --dart --pluginName my_plugin
```

```dart
import 'my_plugin_qjsc.dart';


void main() {
  registerMyPluginByteData();
  ModuleManager.defineModule((moduleNamager) => AlarmClockModule(moduleNamager));
}
```

--------------------------------

### Implement Kraken in main.dart

Source: https://openkraken.com/guide/native/interpolation-flutter

Replace the contents of lib/main.dart to initialize the Kraken widget with a remote bundle URL.

```dart
import 'package:flutter/material.dart';
import 'package:kraken/kraken.dart';


void main() {
  runApp(MyApp());
}


class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    Kraken kraken = Kraken(bundle: KrakenBundle.fromUrl('http://kraken.oss-cn-hangzhou.aliyuncs.com/demo/guide-styles.js'));


    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: kraken
    );
  }
}
```

--------------------------------

### 运行 Kraken 演示命令

Source: https://openkraken.com/guide/basic/layout

通过 Kraken CLI 运行在线演示脚本以预览定位效果。

```bash
kraken http://kraken.oss-cn-hangzhou.aliyuncs.com/demo/guide-position.js
```

--------------------------------

### 安装 Kraken CLI

Source: https://openkraken.com/guide

使用 npm 全局安装 Kraken 命令行工具。

```bash
$ npm install -g @openkraken/cli
```

--------------------------------

### Run Application in Kraken

Source: https://openkraken.com/guide/development/rax

Execute the Kraken CLI command to open the application using the development server URL.

```bash
kraken http://[your.ip]:3333/kraken/home.js
```

--------------------------------

### Run Application with Kraken CLI

Source: https://openkraken.com/guide/development/vue

Command to execute the bundled JavaScript file using the Kraken CLI.

```bash
kraken ./dist/js/app.js
```

--------------------------------

### 启动 Kraken 调试应用

Source: https://openkraken.com/guide

通过 URL 启动 Kraken 调试应用，支持在 Chrome DevTools 中进行调试。

```bash
# kraken [localfile|URL]
$ kraken https://raw.githubusercontent.com/openkraken/kraken/master/kraken/example/assets/bundle.js
```

--------------------------------

### Configure Vue Entry Point for Kraken

Source: https://openkraken.com/guide/development/vue

Modifies the main entry file to mount the Vue application to document.body, as Kraken lacks a traditional HTML DOM structure.

```javascript
// src/main.js
import { createApp } from 'vue';
import App from './App.vue';


createApp(App).mount(document.body);
```

--------------------------------

### 安装 qjsc 工具

Source: https://openkraken.com/guide/advanced/use-quickjs-bytecode

使用 npm 全局安装 qjsc 转换工具。

```bash
npm install -g qjsc
```

--------------------------------

### Synchronize Input to Display

Source: https://openkraken.com/guide/basic/text-input

Demonstrates creating an input element, appending it to the document, and updating a div's text content in real-time using the input event listener.

```javascript
const input = document.createElement('input');
input.placeholder = 'Please input something.';


document.body.appendChild(input);


const div = document.createElement('div');
const text = document.createTextNode('');
div.appendChild(text);
div.style.color = 'red';
div.style.fontSize = '25px';
document.body.appendChild(div);


input.addEventListener('input', event => {
  text.data = input.value;
});
```

--------------------------------

### Implement Inline Styles in Vue Components

Source: https://openkraken.com/guide/development/vue

Demonstrates the recommended approach for styling components in Kraken using inline style objects.

```vue
<template>
  <div :style="style.home">
    demo
  </div>
</template>


<script>
  const style = {
    home: {
      display: 'flex',
      position: 'relative',
      flexDirection: 'column',
      margin: '27vw 0vw 0vw',
      padding: '0vw',
      minWidth: '0vw',
      alignItems: 'center',
    },
  };


  export default {
    name: 'App',
    data() {
      return {
        style,
      };
    },
  };
</script>
```

--------------------------------

### Implement Transition Animation

Source: https://openkraken.com/guide/basic/animation

Demonstrates moving an element by modifying its style properties after a delay, utilizing the transition attribute for smooth movement.

```javascript
setTimeout(() => {
  const f = document.getElementById('foo');
  f.style.left = '200px';
  f.style.top = '200px';
  f.style.background = 'blue';
}, 1000);


<div
  id="foo"
  style={{
    borderRadius: '50px',
    width: '50px',
    height: '50px',
    background: 'red',
    position: 'absolute',
    top: 0,
    left: 0,
    transition: 'all 1s',
  }}
></div>;
```

--------------------------------

### Initialize GestureListener in Kraken

Source: https://openkraken.com/guide/advanced/gesture-to-native

Basic structure for implementing a GestureListener within the Kraken widget configuration.

```dart
Kraken(
bundleURL: 'xxxxxxx',
GestureListener: gestureListener(
    onXXX: (Infos infos) {
      // ...
    },
  ),
)
```

--------------------------------

### kraken.methodChannel.addMethodCallHandler

Source: https://openkraken.com/guide/advanced/communicate-with-native

在 JavaScript 环境中注册一个处理函数，用于接收并处理来自 Native 端的调用请求。

```APIDOC
## kraken.methodChannel.addMethodCallHandler(handler)

### Description
注册一个回调函数，当 Native 端发起调用时，该函数会被触发。

### Parameters
- **handler** (function) - Required - 接收 (method, args) 参数的回调函数
```

--------------------------------

### Verify connected devices

Source: https://openkraken.com/guide/native/interpolation-flutter

Check for connected mobile devices to ensure the environment is ready for deployment.

```bash
flutter devices
1 connected devices:


HWI TL00 (mobile) • 77P5T18126000120 • android-arm64 • Android 9 (API 28)
```

--------------------------------

### Implement Flow Layout with Inline-Block Elements

Source: https://openkraken.com/guide/basic/layout

Demonstrates how to use display: inline-block to arrange block-level elements side-by-side within a parent container.

```javascript
<div style={{ marginLeft: '-20px' }}>
  {/* 块级 */}
  <div style={{ textAlign: 'center' }}>
    {/* 行内 */}
    <p
      style={{
        display: 'inline-block',
        backgroundColor: 'pink',
        width: '40%',
        height: '100px',
        margin: '20px 0 0 20px',
      }}
    />
    {/* 行内 */}
    <span
      style={{
        display: 'inline-block',
        backgroundColor: 'lightblue',
        width: '40%',
        height: '100px',
        margin: '20px 0 0 20px',
      }}
    />
  </div>


  {/* 块级 */}
  <div style={{ textAlign: 'center' }}>
    {/* 行内 */}
    <div
      style={{
        display: 'inline-block',
        backgroundColor: 'orange',
        width: '40%',
        height: '100px',
        margin: '20px 0 0 20px',
      }}
    />
    {/* 行内 */}
    <span
      style={{
        display: 'inline-block',
        backgroundColor: 'lightgreen',
        width: '40%',
        height: '100px',
        margin: '20px 0 0 20px',
      }}
    />
  </div>
</div>
```

--------------------------------

### Switch to Required Flutter Version

Source: https://openkraken.com/guide/contribute/environment

Switch the local Flutter repository to the specific version required by Kraken.

```bash
git checkout <flutter_version>
```

--------------------------------

### Kraken 页面可见性控制

Source: https://openkraken.com/guide/advanced/check-widget-visibility

展示了如何通过 RouteObserver 自动管理页面可见性，以及如何手动调用 pause 和 resume 方法来控制 Kraken 实例的执行状态。

```APIDOC
## 自动监测 (RouteObserver)

### Description
通过将 RouteObserver 传入 Kraken 组件，当页面跳转导致 Kraken 被隐藏时，定时器 (setTimeout, setInterval) 和 requestAnimationFrame 将自动暂停，返回时自动恢复。

### Implementation
```dart
final RouteObserver<ModalRoute<void>> routeObserver = RouteObserver<ModalRoute<void>>();

// 在 MaterialApp 中注册
MaterialApp(navigatorObservers: [routeObserver]);

// 在 Kraken 组件中传入
Kraken(routeObserver: routeObserver);
```

## 手动控制 (pause/resume)

### Description
当无法使用 RouteObserver 监听路由时，开发者可以手动调用 controller 的方法来暂停或恢复页面的执行。

### Methods
- **pause()**: 暂停所有定时器和 requestAnimationFrame。
- **resume()**: 恢复所有定时器和 requestAnimationFrame。

### Usage Example
```dart
Kraken kraken = Kraken();

// 暂停执行
kraken.controller.pause();

// 恢复执行
kraken.controller.resume();
```
```

--------------------------------

### Kraken.registerMethodCallHandler

Source: https://openkraken.com/guide/advanced/communicate-with-native

在 Native (Objective-C/Swift/Java/Kotlin) 环境中注册回调，以处理来自 JavaScript 的调用请求。

```APIDOC
## Kraken.registerMethodCallHandler(handler)

### Description
在 Native 端注册处理程序，用于响应 JS 的 invokeMethod 调用。

### Parameters
- **handler** (function) - Required - 接收 (call, result) 的回调函数，通过 result 返回执行结果
```

--------------------------------

### 对比 Web HTML 入口与 Kraken JSBundle

Source: https://openkraken.com/guide/basic/difference-to-web

展示了传统 Web HTML 文档结构与 Kraken 使用 JS DOM API 构建视图的差异。

```html
<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <div>Hello World!</div>
  </body>
</html>
```

```javascript
const root = document.createElement('div');
root.appendChild(document.createTextNode('Hello World!'));
document.body.appendChild(root);
```

--------------------------------

### 通过 Node API 转换 JavaScript

Source: https://openkraken.com/guide/advanced/use-quickjs-bytecode

使用 qjsc Node.js 模块将 JavaScript 字符串编译为字节码缓冲区并写入文件。

```javascript
const Qjsc = require('qjsc');
const qjsc = new Qjsc();


// Dump bytecode from javascript source;
let buffer = qjsc.compile('function hello() { return 1 + 1};'); // <Buffer ...>
fs.writeFileSync('/path/to/sample.kbc1', buffer);
```

--------------------------------

### Dart 环境处理 JS 调用

Source: https://openkraken.com/guide/advanced/communicate-with-native

通过 KrakenJavaScriptChannel 的 onMethodCall 属性设置回调，支持异步处理 JS 的请求。

```dart
KrakenJavaScriptChannel javaScriptChannel = KrakenJavaScriptChannel();
javaScriptChannel.onMethodCall = (String method, dynamic arguments) async {
  Completer completer = Completer<String>();
  Timer(Duration(seconds: 1), () {
    completer.complete('helloworld');
  });
  return completer.future;
};
Krake kraken = Kraken(
  bundlePath: 'assets/bundle.js',
  javaScriptChannel: javaScriptChannel,
),
```

--------------------------------

### Clone Flutter Repository

Source: https://openkraken.com/guide/contribute/environment

Use this command to clone the Flutter SDK repository to your local machine.

```bash
git clone https://github.com/flutter/flutter
```

--------------------------------

### 查看 DevTools 连接日志

Source: https://openkraken.com/guide/native/embedded-devtools

服务启动后，控制台会输出 WebSocket 地址，用于在 Chrome 或 Edge 浏览器中进行调试。

```text
flutter: Kraken DevTool listening at ws://0.0.0.0:9222
flutter: Open Chrome/Edge and paste following url to your navigator:
flutter:     devtools://devtools/bundled/inspector.html?ws=0.0.0.0:9222
```

--------------------------------

### Establish WebSocket Connection

Source: https://openkraken.com/guide/basic/network

Implements full-duplex communication using the WebSocket API. Requires the WebSocket plugin to be loaded.

```javascript
const ws = new WebSocket('wss://echo.websocket.org');


ws.onopen = function(evt) {
  console.log('Connection open ...');
  ws.send('Hello WebSockets!');
};


ws.onmessage = function(evt) {
  console.log('Received Message: ' + evt.data);
  ws.close();
};


ws.onclose = function(evt) {
  console.log('Connection closed.');
};
```

--------------------------------

### 引入外部样式与 CSS 类选择器

Source: https://openkraken.com/guide/basic/difference-to-web

Kraken 支持通过 link 标签引入样式，但 CSS 解析仅支持 class 选择器。

```html
<!-- index.html -->
<link rel="stylesheet" href="./common.css" />
```

```css
/* common.css */
.logo {
  width: 100px;
  object-fit: contain;
}
```

--------------------------------

### 实现跨端兼容的 ScrollView 组件

Source: https://openkraken.com/guide/advanced/high-performance-list

通过检测 kraken 环境对象，动态切换 display 属性以实现代码在 Kraken 和浏览器间的复用。

```javascript
// ScrollView 组件的部分实现
const isKraken = typeof kraken !== 'undefined';
// ...
const defaultStyle = {
  // ...
};


export default function ScrollView(props) {
  const { children, style } = props;
  const styleToRender = {
    display: isKraken ? 'sliver' : 'block',
    ...defaultStyle,
    ...style,
  };
  return (
    <div {...props} style={style}>
      {props.children}
    </div>
  );
}
```

--------------------------------

### Implement onTouch Gesture Listener

Source: https://openkraken.com/guide/advanced/gesture-to-native

Use onTouch listeners to capture touch interaction propagation. Avoid heavy logic in onTouchMove to prevent performance degradation.

```dart
Kraken(
bundleURL: 'xxxxxxx',
GestureListener: gestureListener(
    onTouchStart: (TouchEvent touchEvent) {
      //...
    },
    onTouchEnd: (TouchEvent touchEvent) {
      //...
    },
    onTouchMove: (TouchEvent touchEvent) {
      //...
    }
  ),
)
```

--------------------------------

### Implement Custom HttpClientInterceptor

Source: https://openkraken.com/guide/advanced/network-intercept

Demonstrates how to intercept, modify, and mock network requests using the HttpClientInterceptor interface.

```dart
import 'dart:typed_data';
import 'package:kraken/foundation.dart';


class CustomHttpClientInterceptor implements HttpClientInterceptor {
  DateTime? _startTime;
  DateTime? _endTime;


  @override
  Future<HttpClientRequest?> beforeRequest(HttpClientRequest request) async {
    request.headers.set('x-foo', 'bar');
    print('beforeRequest, request headers: ${request.headers}');
    if (request.uri.path == '/posts/1') {
      _startTime = DateTime.now();
    }
    return null;
  }


  @override
  Future<HttpClientResponse?> afterResponse(HttpClientRequest request, HttpClientResponse response) async {
    print('afterResponse, response headers: ${response.headers}');
    if (request.uri.path == '/posts/1') {
      _endTime = DateTime.now();
      print('/posts/1 cost: ${_endTime!.millisecondsSinceEpoch - _startTime!.millisecondsSinceEpoch}ms');
    }
    return null;
  }


  @override
  Future<HttpClientResponse?> shouldInterceptRequest(HttpClientRequest request) async {
    if (request.uri.path == '/posts/1') {
      // Direct output string, transform to stream.
      String replaced = '{ "foo": "bar" }';
      Uint8List data = Uint8List.fromList(replaced.codeUnits);
      Stream<Uint8List> stream = Stream<Uint8List>.value(data);
      return HttpClientStreamResponse('text/html', 'utf8', stream, responseHeaders: { 'x-kraken': 'hey', 'hello': 'world' });
    }
    return null;
  }
}


void main() {
  runApp(Kraken(
    bundleContent: '''
      fetch('https://jsonplaceholder.typicode.com/posts/1')
        .then(function(response) {
          return response.json();
        })
        .then(function(data) {
          // This is the object from API.
          console.log('LOG:', data);
        })
        .catch(err => {
          console.error('error:', err);
        });
    ''',
    httpClientInterceptor: CustomHttpClientInterceptor(),
  ));
}
```

--------------------------------

### iOS 环境集成与通信

Source: https://openkraken.com/guide/advanced/communicate-with-native

在 Objective-C/Swift 环境中引入 SDK，并使用 registerMethodCallHandler 处理 JS 调用或 invokeMethod 调用 JS 函数。

```objective-c
#import <kraken_sdk/Kraken.h>
```

```swift
// 初始化 Kraken 插件
let kraken = Kraken.init(flutterEngine: flutterViewController.engine)


// 注册一个处理 JS 调用的回调函数
kraken.registerMethodCallHandler({ (call: FlutterMethodCall, result: FlutterResult) in
  // 调用 JS 的函数
  result("method: " + call.method)
})
```

```swift
kraken.invokeMethod(call.method, arguments: call.arguments)
```

--------------------------------

### Add Kraken dependency

Source: https://openkraken.com/guide/native/interpolation-flutter

Include the Kraken package in the pubspec.yaml file.

```yaml
dependencies:
  kraken: '>= 0.0.1' # 会安装最新的 kraken 依赖
```

--------------------------------

### Configure navigation delegate

Source: https://openkraken.com/guide/native/widget

Customizes behavior during Kraken view loading and navigation requests.

```dart

KrakenNavigationDelegate navigationDelegate = KrakenNavigationDelegate();
navigationDelegate.errorHandler = (Object error, Object stack) {};
navigationDelegate.setDecisionHandler((KrakenNavigationAction action) async {
  // ...
  return KrakenNavigationActionPolicy.cancel;
});


Kraken kraken = Kraken(
  navigationDelegate: navigationDelegate,
);

```

--------------------------------

### Load local bundle

Source: https://openkraken.com/guide/native/widget

Loads a JavaScript or Bytecode script from a local asset path.

```dart

Kraken kraken = Kraken(
  bundle: KrakenBundle.fromUrl('assets://assets/bundle.js')
);

```

--------------------------------

### JS 环境处理 Native 回调

Source: https://openkraken.com/guide/advanced/communicate-with-native

使用 addMethodCallHandler 注册处理函数，以响应来自 Native 端的调用。

```javascript
kraken.methodChannel.addMethodCallHandler((method, args) => {
  switch (method) {
    case 'foo':
      handleFoo(args);
      break;
    case 'bar':
      handleBar(args);
      break;
  }
});
```

--------------------------------

### 编写 BDD 风格测试用例

Source: https://openkraken.com/guide/contribute/test

使用 Jasmine 语法定义测试套件，并通过 snapshot() 函数验证渲染结果。

```typescript
describe('block-in', () => {
  it('inline-003-ref', async () => {
    let div;
    div = createElement(
      'div',
        {
          style: {
            color: 'green',
          },
        },
        [createText(`There should be no red.`)]
      );
      BODY.appendChild(div);


      await snapshot();
    });
  }
});
```

--------------------------------

### Retrieve Performance Report

Source: https://openkraken.com/guide/advanced/measure-performance

Call the performance.__kraken_navigation_summary__() API to access the collected performance data after enabling profile mode.

```javascript
setTimeout(() => {
  console.log(performance.__kraken_navigation_summary__());
}, 2000); // 2s 后获取报告
```

--------------------------------

### Listen to Custom Events in JavaScript

Source: https://openkraken.com/guide/advanced/widget-custom-element

Demonstrates how to create a custom element and attach an event listener to handle events dispatched from the Flutter side.

```javascript
const flutterButton = document.createElement('flutter-button');
flutterButton.addEventListener('buttonpress', e => {
  console.log(e.detail); // helloworld
  document.body.appendChild(document.createTextNode(e.detail));
});
document.body.appendChild(flutterButton);
```

--------------------------------

### Enable Profile Mode via Environment Variable

Source: https://openkraken.com/guide/advanced/measure-performance

Set the ENABLE_PROFILE environment variable during the bridge build process to enable performance tracking.

```bash
ENABLE_PROFILE=true npm run build:bridge:all:release
```

--------------------------------

### Kraken 全局通信接口定义

Source: https://openkraken.com/guide/advanced/custom-js-api

Kraken 注入的全局 kraken 对象提供的通信方法签名。

```typescript
// 调用 Dart 函数
kraken.invokeModule: (module: string, method: string, params?: Object | null, fn?: (err: Error, data: any) => void) => string;


// 监听 Dart 触发的 Module 事件
kraken.addKrakenModuleListener: (fn: (moduleName: string, event: Event, extra: string) => void) => void;
```

--------------------------------

### 集成 KrakenDevTools

Source: https://openkraken.com/guide/native/embedded-devtools

在 Kraken 构造函数中配置 devToolsService 以启用 Chrome DevTools 支持。

```dart
import 'package:kraken/devtools.dart';


Kraken(
  // ...
  devToolsService: ChromeDevToolsService(),
);
```

--------------------------------

### kraken.methodChannel.invokeMethod

Source: https://openkraken.com/guide/advanced/communicate-with-native

在 JavaScript 环境中调用 Native 端实现的函数。第一个参数为方法名，后续参数为传递给 Native 的数据。

```APIDOC
## kraken.methodChannel.invokeMethod(method, ...args)

### Description
在 JS 环境中调用 Native 端实现的函数，并返回一个 Promise 以获取执行结果。

### Parameters
- **method** (string) - Required - 要调用的 Native 方法名
- **...args** (any) - Optional - 传递给 Native 的参数

### Response
- **result** (any) - Native 方法执行后的返回值
```

--------------------------------

### Configure JavaScript channel

Source: https://openkraken.com/guide/native/widget

Sets up a communication channel for exchanging information with JavaScript.

```dart

KrakenJavaScriptChannel javaScriptChannel = KrakenJavaScriptChannel();
javaScriptChannel.onMethodCall = (String method, dynamic arguments) async {
  Completer completer = Completer<String>();
  Timer(Duration(seconds: 1), () {
    completer.complete('helloworld');
  });
  return completer.future;
};
Krake kraken = Kraken(
  javaScriptChannel: javaScriptChannel,
),

```

--------------------------------

### Dart 层实现 Module 逻辑

Source: https://openkraken.com/guide/advanced/custom-js-api

通过继承 BaseModule 实现业务逻辑，并使用 moduleManager 处理回调与事件触发。

```dart
import 'package:kraken/module.dart';
import 'package:kraken/dom.dart';
import 'dart:async';


class AlarmClockModule extends BaseModule {
  AlarmClockModule(ModuleManager moduleManager) : super(moduleManager);


  @override
  String get name => 'AlarmClock';


  @override
  void dispose() {}


  @override
  String invoke(String method, dynamic params, InvokeModuleCallback callback) {
    try {
      if (method == 'setTime') {
        dynamic time = params;
        Timer(Duration(seconds: time.toInt()), () {
          Event alarmEvent = Event('alarm');
          moduleManager.emitModuleEvent(name,
              event: alarmEvent, data: 'Wake Up!');
          callback(data: 'success');
        });
      }
      return null;
    } catch (e, stack) {
      String errmsg = '$e\n$stack';
      callback(errmsg: errmsg);
    }


    return null;
  }
}


void main() {
  ModuleManager.defineModule((moduleNamager) => AlarmClockModule(moduleNamager));
}
```

--------------------------------

### onTouch

Source: https://openkraken.com/guide/advanced/gesture-to-native

The onTouch listener captures touch interaction events. It is recommended to avoid heavy logic in onTouchMove to maintain performance.

```APIDOC
## onTouch

### Description
Listens for touch events (onTouchStart, onTouchMove, onTouchEnd) passed to the widget. 

### Parameters
- **touchEvent** (TouchEvent) - The touch event data.

### Note
Avoid frequent heavy calculations within onTouchMove to prevent performance degradation.
```

--------------------------------

### Load JavaScript bytecode content

Source: https://openkraken.com/guide/native/widget

Executes JavaScript provided as bytecode.

```dart

Kraken kraken = Kraken(
  bundle: KrakenBundle.fromBytecode(bytecode),
);

```

--------------------------------

### Manage State with Hooks

Source: https://openkraken.com/guide/development/rax

Use the useState hook to manage local component state in a Rax application.

```javascript
import { useState } from 'rax';


function Example() {
  // 声明一个叫 "count" 的 state 变量
  const [count, setCount] = useState(0);


  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}
```

--------------------------------

### Implement Custom UriParser

Source: https://openkraken.com/guide/advanced/network-intercept

Shows how to override the default URI resolution logic by extending the UriParser class.

```dart
class MyUriParser extends UriParser {
  @override
  Uri resolve(Uri base, Uri relative) {
    Uri uri = super.resolve(base, relative);
    // custom parse uri.
    return uri;
  }
}


void main() {
  runApp(Kraken(
    uriParser: MyUriParser(),
  ));
}
```

--------------------------------

### Display an Image in Kraken

Source: https://openkraken.com/guide/basic/multimedia

Use the <img> tag to render images. Kraken supports standard formats including JPEG, PNG, GIF, and WebP.

```jsx
<div style={{ padding: '20px' }}>
  <img
    src="https://img.alicdn.com/imgextra/i4/O1CN01GIxaZ01V0isGFLuJQ_!!6000000002591-2-tps-400-339.png"
    style={{ width: '100%' }}
  />
</div>
```

--------------------------------

### Load JavaScript string content

Source: https://openkraken.com/guide/native/widget

Executes JavaScript provided as a string.

```dart

Kraken kraken = Kraken(
  bundle: KrakenBundle.fromContent('console.log(1)'),
);

```

--------------------------------

### Android 环境集成与通信

Source: https://openkraken.com/guide/advanced/communicate-with-native

在 Java/Kotlin 环境中引入 SDK，通过 registerMethodCallHandler 注册回调或使用 invokeMethod 与 JS 通信。

```kotlin
import com.openkraken.kraken.Kraken;
```

```kotlin
class MainActivity: FlutterActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    var kraken = Kraken(flutterEngine)
    kraken.registerMethodCallHandler { call, result ->
        print("method " + call.method) // helloworld
        result.success("helloworld")
    }
  }
  override fun configureFlutterEngine(@NonNull flutterEngine: FlutterEngine) {
    GeneratedPluginRegistrant.registerWith(flutterEngine);
  }
}
```

```kotlin
kraken.invokeMethod("helloworld", "1234")
```

--------------------------------

### Listen to gesture events

Source: https://openkraken.com/guide/native/widget

Configures a listener for interaction events like drag and touch.

```dart

Kraken(
GestureListener: gestureListener(
    onDrag: (GestureEvent gestureEvent) {
      if (gestureEvent.state == EVENT_STATE_START) {
        //...
      } else if (gestureEvent.state == EVENT_STATE_UPDATE) {
        //...
      } else if (gestureEvent.state == EVENT_STATE_END) {
        //...
      }
    },
    onTouchStart: (TouchEvent touchEvent) {
      //...
    },
    onTouchEnd: (TouchEvent touchEvent) {
      //...
    },
    onTouchMove: (TouchEvent touchEvent) {
      //...
    }
  ),
)

```

--------------------------------

### Enable Profile Mode via Flutter CLI

Source: https://openkraken.com/guide/advanced/measure-performance

Use the --profile flag when running the Flutter application to enable performance data collection.

```bash
flutter run --profile
```

--------------------------------

### 使用 HTML 标签搭建页面结构

Source: https://openkraken.com/guide/basic/style

使用原生 HTML 标签定义博客文章的基本布局结构。

```html
<div>
  <div>Kraken 入门教程</div>
  <div>2021-1-1</div>
  <div>
    <img src="https://img.alicdn.com/imgextra/i4/O1CN01GIxaZ01V0isGFLuJQ_!!6000000002591-2-tps-400-339.png" />
  </div>
  <div>
    Kraken 是一款基于 W3C 标准的高性能渲染引擎。Kraken 底层基于 Flutter
    进行渲染，通过其自绘渲染的特性，保证多端一致性。上层基于 W3C
    标准实现，拥有非常庞大的前端开发者生态。
  </div>
</div>
```

--------------------------------

### Configure Kraken viewport width

Source: https://openkraken.com/guide/native/widget

Sets the custom width for the Kraken container.

```dart

Kraken kraken = Kraken(
  viewportWidth: window.physicalSize.width / window.devicePixelRatio,
);

```

--------------------------------

### 在 JavaScript 中创建跳转链接

Source: https://openkraken.com/guide/advanced/handle-navigation

通过创建 <a> 标签并设置 href 属性，在页面中定义可点击的跳转目标。

```javascript
const text = document.createTextNode('Click me and navigate to b.');
const a = document.createElement('a');
a.href = 'b.js';
a.style.display = 'block';


const c = document.createElement('a');
c.href = 'c.js';
c.style.display = 'block';
c.appendChild(document.createTextNode('Click me and nothing happened.'));
const p = document.createElement('p');
p.style.textAlign = 'center';
a.appendChild(text);
p.appendChild(a);
p.appendChild(c);
document.body.appendChild(p);
```

--------------------------------

### 在 Dart 中实现跳转拦截逻辑

Source: https://openkraken.com/guide/advanced/handle-navigation

使用 KrakenNavigationDelegate 的 setDecisionHandler 方法来定义跳转策略，返回 allow 或 cancel 以控制跳转行为。

```dart
KrakenNavigationDelegate navigationDelegate = KrakenNavigationDelegate();
navigationDelegate.errorHandler = (Object error, Object stack) {};
navigationDelegate.setDecisionHandler((KrakenNavigationAction action) async {
  print(action);
  if (action.target == 'b.js') {
    return KrakenNavigationActionPolicy.allow;
  }
  return KrakenNavigationActionPolicy.cancel;
});


Kraken kraken = Kraken(
  bundlePath: 'assets/bundle.js',
  navigationDelegate: navigationDelegate,
);
```

--------------------------------

### JS 环境调用 Native 方法

Source: https://openkraken.com/guide/advanced/communicate-with-native

使用 kraken.methodChannel.invokeMethod 在 JS 中调用 Native 实现的函数，并处理返回结果或错误。

```javascript
kraken.methodChannel
  .invokeMethod('somemethod', 'parameter 1', ['parameter 2'], {
    value: 'parmeter 3',
  })
  .then(result => {
    console.log('data from native', result);
  })
  .catch(err => {
    console.log('some error occured', err);
  });
```

--------------------------------

### Handle onLoad event

Source: https://openkraken.com/guide/native/widget

Callback triggered when the document has finished loading.

```dart

Kraken kraken = Kraken(
  onLoad: (KrakenController controller) {
    // ...
  },
);

```
Tokens:
Raw