feat: init

.editorconfig

@@ -0,0 +1,10 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+max_line_length = 120

.eslintrc.js

@@ -0,0 +1,150 @@
+module.exports = {
+  root: true,
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    tsconfigRootDir: __dirname,
+    project: ["**/tsconfig.json"],
+  },
+  env: {
+    browser: true,
+    node: true,
+    jest: true,
+  },
+  ignorePatterns: [
+    '**/{node_modules,libs}',
+    '*.js',
+    '*.d.ts',
+  ],
+  extends: [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:promise/recommended",
+    "plugin:@typescript-eslint/recommended-requiring-type-checking",
+    "plugin:compat/recommended",
+  ],
+  plugins: [
+    "@typescript-eslint",
+    "compat",
+  ],
+  rules: {
+    "arrow-parens": ["error", "as-needed"],
+    "array-bracket-spacing": ["error", "never"],
+    "brace-style": ["error", "1tbs", { "allowSingleLine": true }],
+    "comma-dangle": ["error", "always-multiline"],
+    "curly": "error",
+    "generator-star-spacing": ["error", {
+      "before": false,
+      "after": true,
+      "anonymous": "neither",
+      "method": "neither"
+    }],
+    "new-parens": "error",
+    // TODO:: will be opened
+    "spaced-comment": "off",
+    "no-multi-spaces": [
+      "error",
+      {
+        "ignoreEOLComments": true
+      }
+    ],
+    "no-console": ["error", { "allow": ["info", "warn", "error", "debug", "trace"] }],
+    "no-inner-declarations": "error",
+    "no-multiple-empty-lines": ["error", { "max": 1, "maxEOF": 1 }],
+    "no-trailing-spaces": "error",
+    "no-void": ["error", { "allowAsStatement": true }],
+    "padding-line-between-statements": [
+      "error",
+      { "blankLine": "always", "prev": "*", "next": ["return", "break"] },
+      { "blankLine": "never", "prev": "*", "next": ["case", "default"] },
+      { "blankLine": "always", "prev": ["const", "let", "var"], "next": "*" },
+      { "blankLine": "any", "prev": ["const", "let", "var"], "next": ["const", "let", "var"] }
+    ],
+    "promise/always-return": "off",
+    "promise/catch-or-return": "error",
+    "prefer-rest-params": "off",
+    "semi": ["error", "always"],
+    "space-in-parens": ["error", "never"],
+    "@typescript-eslint/comma-spacing": "error",
+    "@typescript-eslint/no-namespace": "off",
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      { "vars": "all", "varsIgnorePattern": "^_", "args": "none", "caughtErrors": "all", "caughtErrorsIgnorePattern": "^ignore" }
+    ],
+    "@typescript-eslint/ban-ts-comment": "off",
+    "@typescript-eslint/ban-types": ["error", { "types": { "{}": false, "Function": false, "Object": false } }],
+    "@typescript-eslint/indent": ["error", 2, {
+      "SwitchCase": 1,
+      "ignoredNodes": [
+        `ClassBody.body > PropertyDefinition[decorators.length > 0] > .key`,
+      ],
+    }],
+    "@typescript-eslint/keyword-spacing": "error",
+    // TODO:: will be opened
+    "@typescript-eslint/no-var-requires": "off",
+    // TODO:: will be opened
+    "@typescript-eslint/no-non-null-assertion": "off",
+    // TODO:: will be opened
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-empty-interface": "off",
+    "@typescript-eslint/no-empty-function": "off",
+    "@typescript-eslint/no-unnecessary-type-arguments": "error",
+    "@typescript-eslint/no-unnecessary-type-assertion": "error",
+    "@typescript-eslint/no-unnecessary-type-constraint": "error",
+    "@typescript-eslint/no-redundant-type-constituents": "warn",
+    // TODO:: will be opened
+    "@typescript-eslint/no-unsafe-return": "off",
+    // TODO:: will be opened
+    "@typescript-eslint/no-unsafe-member-access": "off",
+    "@typescript-eslint/no-unsafe-call": "off",
+    "@typescript-eslint/object-curly-spacing": ["error", "always"],
+    "@typescript-eslint/prefer-includes": "error",
+    "@typescript-eslint/prefer-reduce-type-parameter": "error",
+    "@typescript-eslint/prefer-ts-expect-error": "error",
+    "@typescript-eslint/return-await": "error",
+    // TODO:: will be opened
+    "@typescript-eslint/restrict-plus-operands": "off",
+    // TODO:: will be opened
+    "@typescript-eslint/restrict-template-expressions": "off",
+    "@typescript-eslint/space-infix-ops": ["error", { "int32Hint": false }],
+    // TODO:: will be "error"
+    "@typescript-eslint/strict-boolean-expressions": "off",
+    "@typescript-eslint/no-floating-promises": ["error", { "ignoreVoid": true, "ignoreIIFE": true }],
+    "@typescript-eslint/quotes": ["error", "single"],
+    // TODO:: will be opened
+    "@typescript-eslint/require-await": "off",
+    "@typescript-eslint/space-before-blocks": "error",
+    "@typescript-eslint/space-before-function-paren": ["error", "always"],
+    "@typescript-eslint/type-annotation-spacing": "error",
+    "@typescript-eslint/unbound-method": "off",
+    // TODO:: will be opened
+    "@typescript-eslint/no-misused-promises": "off",
+    "@typescript-eslint/prefer-regexp-exec": "off",
+    "@typescript-eslint/semi": "error",
+    // TODO:: will be opened
+    "@typescript-eslint/member-delimiter-style": ["error", {
+      "multiline": {
+        "delimiter": "comma",
+        "requireLast": true
+      },
+      "singleline": {
+        "delimiter": "comma",
+        "requireLast": false
+      }
+    }],
+    "@typescript-eslint/no-unsafe-enum-comparison": "warn",
+    "@typescript-eslint/no-base-to-string": "off",
+    "@typescript-eslint/no-duplicate-enum-values": "off",
+    "@typescript-eslint/no-unsafe-assignment": "off",
+    // TODO:: will be opened
+    "@typescript-eslint/no-unsafe-argument": "off",
+    "@typescript-eslint/consistent-type-imports": [
+      "error",
+      {
+        "prefer": "type-imports",
+        "disallowTypeAnnotations": false,
+      },
+    ],
+    "compat/compat": "error",
+  },
+};

.gitignore

@@ -0,0 +1,16 @@
+node_modules
+.DS_Store
+dist
+es
+lib
+*.local
+*.tgz
+.eslintcache
+*.tsbuildinfo
+.vscode
+.idea
+.pnpm-debug.log
+temp
+api
+www
+.history

.husky/.gitignore

@@ -0,0 +1 @@
+_

.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+PATH=$PATH:/usr/local/bin:/usr/local/sbin
+npx commitlint --edit "$1"

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+PATH=$PATH:/usr/local/bin:/usr/local/sbin
+npx lint-staged

.lintstagedrc.json

@@ -0,0 +1,6 @@
+{
+  "src/**/*.ts": [
+    "eslint --cache --fix",
+    "sh -c 'tsc -b tsconfig.check.json'"
+  ]
+}

.npmrc

@@ -0,0 +1,2 @@
+engine-strict=true
+enable-pre-post-scripts=true

README.md

@@ -1,2 +1,47 @@
-# effects-components
-Galacean Effects components
+# Galacean Effects Components
+
+Galacean Effects Player 的组件集
+
+## 安装依赖
+
+``` bash
+# 安装 @galacean/effects（如有安装，请忽略）
+$ npm i @galacean/effects --save
+# 安装 effects 组件库
+$ npm i @galacean/effects-components --save
+```
+
+## 使用说明
+
+- [Swiper](https://code.alipay.com/vvfx/mars-components/blob/master/components/swiper/index.md)
+
+## 开发
+
+### 环境准备
+
+- Node.js `>= 16.0.0`
+- [Pnpm](https://pnpm.io/)  `latest`
+  - 安装：
+    - `npm install -g pnpm`
+  - 升级：
+    - `pnpm install -g pnpm`
+
+### 本地开发
+
+#### 开始开发
+
+``` bash
+# 1. 安装依赖（首次）
+pnpm install
+# 2. demo
+pnpm dev
+```
+
+> 浏览器打开：http://localhost:8080/
+
+### 低端设备测试
+
+``` bash
+# demo 的 legacy 版本
+pnpm preview
+```

commitlint.config.js

@@ -0,0 +1 @@
+module.exports = { extends: ['@commitlint/config-conventional'] };

components/index.ts

@@ -0,0 +1 @@
+export * from './swiper';

components/swiper/demo/index.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>轮播/Swiper - Galacean Effects Components Demo</title>
+  <style>
+    html, body, div, canvas { margin: 0; padding: 0; }
+    .container {
+      width: 375px;
+      height: 812px;
+      background-color: rgba(0, 0, 0, 255);
+    }
+    @media (max-width: 719px) {
+      html, body, .container {
+        overflow: hidden;
+        width: 100%;
+        height: 100%;
+      }
+    }
+  </style>
+</head>
+<body>
+  <div class="container" id="J-container"></div>
+  <script type="module" src="./index.ts"></script>
+</body>
+</html>

components/swiper/demo/index.ts

@@ -0,0 +1,114 @@
+import { AbstractPlugin, Player, VFXItem, registerPlugin } from '@galacean/effects';
+import { Swiper } from '@galacean/effects-components';
+
+class MockPlugin extends AbstractPlugin { }
+class MockVFXItem extends VFXItem<any> { }
+registerPlugin('spine', MockPlugin, MockVFXItem);
+registerPlugin('orientation-transformer', MockPlugin, MockVFXItem);
+
+const mainJSON = 'https://mdn.alipayobjects.com/mars/afts/file/A*opZMTKzsq4oAAAAAAAAAAAAADlB4AQ';
+const container = document.getElementById('J-container');
+const renderLevel = /render-level=(A|B|S)/i.test(location.search) ? RegExp.$1 : 'S';
+const cardIdList = ['sports', 'shake', 'scan', 'draw', 'forest', 'tab3'];
+const cardDataList = [{
+  begin: true, // true 为红色按钮，false 为黄色按钮
+  btn: '扫福得福卡',
+  bubble: '文案最多八个字', // 汽泡文案
+}, {
+  begin: false,
+  btn: '找能量得福卡',
+  bubble: '这是汽泡~',
+}, {
+  begin: true,
+  btn: '摇一摇得福卡',
+  bubble: '气泡气泡气泡',
+}, {
+  begin: false,
+  btn: '画年画得福卡',
+  bubble: '',
+}, {
+  begin: false,
+  btn: '走99步得福卡',
+  bubble: '这是汽泡~',
+}, {
+  begin: true,
+  btn: '送福气得福卡',
+}];
+const buttonConfig = {
+  images: [
+    'https://mdn.alipayobjects.com/huamei_p0cigc/afts/img/A*O4HKSpQRovYAAAAAAAAAAAAADoB5AQ/original', // 开始带tip
+    'https://mdn.alipayobjects.com/huamei_p0cigc/afts/img/A*pf_aRJ3Oz3oAAAAAAAAAAAAADoB5AQ/original', // 开始不带tip
+    'https://mdn.alipayobjects.com/huamei_p0cigc/afts/img/A*fg6cTKmc-WwAAAAAAAAAAAAADoB5AQ/original', // 未开始不带tip
+    'https://mdn.alipayobjects.com/huamei_p0cigc/afts/img/A*nqToSpH8va4AAAAAAAAAAAAADoB5AQ/original', // 未开始带tip
+  ],
+};
+let initCardIndex = 2;
+let timer;
+
+(async () => {
+  try {
+    const player = new Player({
+      container,
+      notifyTouch: true,
+      interactive: true,
+      fps: ['A', 'B'].includes(renderLevel) ? 45 : 60,
+      pixelRatio: window.devicePixelRatio,
+    });
+    const variables = updateVariables();
+    const composition = await player.loadScene(mainJSON, {
+      variables,
+      // renderLevel,
+      templateScale: 2,
+      // 最长等待加载时间，超过则使用降级
+      // timeout: 10,
+    });
+
+    if (!composition) {
+      throw new Error('composition not exist');
+    }
+    const swiper = new Swiper(player, {
+      cardIdList,
+      initCardIndex,
+    });
+
+    swiper.run(composition);
+
+    // 注意：此处便于演示，如有类似使用，请记得 clearInterval
+    timer = setInterval(() => {
+      swiper.gotoCardIndex(++initCardIndex % cardIdList.length);
+    }, 2000);
+  } catch (e) {
+    // 此处做降级处理
+    if (timer) {
+      clearInterval(timer);
+      timer = undefined;
+    }
+    console.error('biz', e);
+  }
+})();
+
+/**
+ * 更新数据模板变量
+ * 注意：使用文本元素可不用关心 text 和 tip 的设置
+ * @returns
+ */
+function updateVariables () {
+  const variables: Record<string, string> = {};
+  const { images } = buttonConfig;
+
+  cardDataList.forEach((data, index) => {
+    const prefix = cardIdList[index];
+
+    variables[`${prefix}_text`] = data.btn;
+
+    if (data.bubble) {
+      variables[`${prefix}_tip`] = data.bubble;
+      variables[`${prefix}_btn`] = data.begin ? images[0] : images[3];
+    } else {
+      variables[`${prefix}_tip`] = '';
+      variables[`${prefix}_btn`] = data.begin ? images[1] : images[2];
+    }
+  });
+
+  return variables;
+}