-
-
创建应用
-
海量可复用物料，搭配研发框架极速构建多端应用。
-
-
-
- {currentStep === 0 &&
}
+
+
+
+
+
+
创建应用
+
海量可复用物料，搭配研发框架极速构建多端应用。
+
+
+
+ {currentStep === 0 && }
+
-
{steps[currentStep]}
-
-
+ {loading ?
: (
+
{steps[currentStep]}
+ )}
+
+
+
);
};
diff --git a/extensions/iceworks-style-helper/CHANGELOG.md b/extensions/iceworks-style-helper/CHANGELOG.md
index 44ef473aa..3eb225098 100644
--- a/extensions/iceworks-style-helper/CHANGELOG.md
+++ b/extensions/iceworks-style-helper/CHANGELOG.md
@@ -1,5 +1,9 @@
# Change Log
+## 0.3.2
+
+- Support nested CSS preview, definition and completion.
+
## 0.3.1
- Support ICE css module style preview and completion.
diff --git a/extensions/iceworks-style-helper/README.en.md b/extensions/iceworks-style-helper/README.en.md
index 77b57c30f..989c98dd0 100644
--- a/extensions/iceworks-style-helper/README.en.md
+++ b/extensions/iceworks-style-helper/README.en.md
@@ -5,40 +5,76 @@ English | [简体中文](./README.md)
# Iceworks Style Helper
-Write styles easier in [JSX](https://reactjs.org/docs/introducing-jsx.html), friendly for React and [Rax](https://rax.js.org/).
+Write styles easier in [JSX](https://reactjs.org/docs/introducing-jsx.html), provide a powerful auxiliary development functions in style files like CSS, SASS. Friendly for React and [Rax](https://rax.js.org/).
## Usage
### JSX
-* When editing the 'style' attribute of a component in a JSX file, an automatic completion reminder will be given:
+When editing the 'style' attribute of a component in a JSX file, an automatic completion reminder will be given:
- 
+#### Inline style
-* Automatic completion When editing the 'style' name of a component in a JSX file, Use `cmd + click` (Windows: `ctrl + click`) jump to the identifier under the cursor.
+Automatic completion for style keys and values according to W3C standards:
- 
+
- 
+##### Variable assignment
-* When editing the 'className' attribute of a component in a JSX file, an automatic completion reminder will be given:
+When using CSS Module, automatic completion of style fields is carried out according to style declaration:
- 
+
-### Class name
+### className
+
+Automatic completion, value previews, and defined jumps are given when editing the component's 'className' properties in the JSX file.
+
+#### Automatic completion
+
+According to the class selector in the style file 'import' , automatic completion will be provided when editing ‘className'.
+
+
+#### Value preview and define jump
+
+
+
+1. Hover over the 'className' value, and the hover board displays the style declaration corresponding to the value.
+2. Click the corresponding 'className' value to jump to the definition of the value.
+
+### Class name
When editing the 'class' name of a CSS, LESS or SASS file, an automatic completion reminder will be given:
-
+
+
+1. Declare the value of the component 'className' property in JSX file like ` home, Text0, Text1, text2 `.
+2. Reference SASS files in JSX: 'import './index.scss''.
+3. step into the 'index.css' file.
+4. Enter ' . ' in ' index.css ' to get the auto-completion reminder of the above property values.
+
+### SASS
+
+#### Automatic completion When editing the variable.
+
+When a variable is entered in an SASS file, code completion is provided based on the reference file
+
+
+
+#### Show the variable value when hover it.
+
+
+
+#### Automatic completion When editing the colors and attributes.
+
+When the attribute value is entered, if it is found that variables can be replaced as standard value,variable replacement suggestions will appear:
+
+
-### Sass
+#### variable identifier and link
-* Automatic completion When editing the variable.
-* Show the variable value when hover it.
-* Automatic completion When editing the colors and attributes.
-* Use `cmd + click` (Windows: `ctrl + click`) jump to the variable identifier under the cursor.
+Use `cmd + click` (Windows: `ctrl + click`) jump to the variable identifier under the cursor.
-
+ß
## More
diff --git a/extensions/iceworks-style-helper/README.md b/extensions/iceworks-style-helper/README.md
index 5ac5cdabe..154105a51 100644
--- a/extensions/iceworks-style-helper/README.md
+++ b/extensions/iceworks-style-helper/README.md
@@ -5,45 +5,88 @@
# Iceworks 样式开发辅助插件
-在 [JSX](https://zh-hans.reactjs.org/docs/introducing-jsx.html) 中更快速地编写内联样式，对 React 和 [Rax](https://rax.js.org/) 应用友好。
+方便您在 [JSX](https://zh-hans.reactjs.org/docs/introducing-jsx.html) 中更快速地编写内联样式，并对 CSS 、SASS 等样式文件提供强大的辅助开发功能。对 React 和 [Rax](https://rax.js.org/) 应用友好。
## 用法
### JSX 文件
-* 在 JSX 文件中编辑组件的 `style` 属性时将给予自动补全提醒：
+#### style 属性
- 
+在 JSX 文件中编辑组件的 `style` 属性时给予自动补全提醒。
-* 在 JSX 文件中编辑组件的样式名时给予补全提醒并可通过 `cmd + 点击`（ Windows: `ctrl + 点击` ）跳转：
+##### 行内样式
- 
+根据 w3c 标准给予样式字段和值的自动补全提醒：
- 
+
-* 在 JSX 文件中编辑组件的 `className` 属性时给予自动补全提醒，预览及条跳转：
+##### 变量赋值
+
+使用 CSS Module 时，根据样式声明进行样式字段的自动补全：
+
+
+
+#### className 属性
+
+在 JSX 文件中编辑组件的 `className` 属性时给予自动补全提醒，值预览及定义跳转。
+
+##### 自动补全提醒
+
+在编辑组件的 `className` 时，根据文件 `import` 的样式文件内的类选择器进行自动补全提醒。
+
+
+
+##### 值预览及定义跳转
+
+
+
+1. 鼠标停留在 `className` 值上，出现悬浮部件显示该值对应的样式声明
+
+2. 点击对应的 `className` 值，跳转到该值的定义处
- 
-
### 样式文件
-* 在 CSS、LESS、SASS 文件中编辑 `class` 名称时给予自动补全提醒：
+在 CSS、LESS、SASS 文件中输入类选择器时，根据引用值进行自动补全提醒：
+
+
- 
+1. 在 JSX 内声明组件 `className` 属性的值为 ` home , text0 , text1 , text2 `
+2. 在 JSX 内引用样式文件：`import './index.scss'`
+3. 新建该 `index.css` 文件
+4. 在 `index.css` 内输入 `.` ，出现上述属性值的自动补全提醒
### SASS 文件
-* 输入变量时给予自动补全提醒
-* 鼠标悬停在变量上时，预览变量对应值
-* 输入样式颜色值时给予变量的替换列表提醒
-* 通过 cmd + 点击（ Windows: ctrl + 点击 ）进行变量的定义代码跳转
+#### 变量自动补全提醒
-
+在 SASS 文件内输入变量时，根据引用文件进行代码自动补全：
+
+
+
+#### 变量预览值
+
+鼠标停留在变量上，出现悬浮部件显示该变量对应的值：
+
+
+
+#### 属性值使用变量替换的建议
+
+输入属性值时，如发现可使用变量进行替换，则出现变量替换提醒列表：
+
+
+
+#### 变量的定义跳转
+
+通过 cmd + 点击（ Windows: ctrl + 点击 ）进行变量的定义代码跳转：
+
+
## 更多
-访问 [Iceworks Pack](https://marketplace.visualstudio.com/items?itemName=iceworks-team.iceworks) 了解更多 Iceworks 相关功能。
+访问 [Iceworks 套件](https://marketplace.visualstudio.com/items?itemName=iceworks-team.iceworks)获取更多功能。
## License
[MIT](https://github.com/ice-lab/iceworks/blob/master/LICENSE)
+
diff --git a/extensions/iceworks-style-helper/assets/logo.png b/extensions/iceworks-style-helper/assets/logo.png
index 2004c78ce..1f48dfb38 100644
Binary files a/extensions/iceworks-style-helper/assets/logo.png and b/extensions/iceworks-style-helper/assets/logo.png differ
diff --git a/extensions/iceworks-style-helper/package.json b/extensions/iceworks-style-helper/package.json
index c2271d3f7..d79ad5ebe 100644
--- a/extensions/iceworks-style-helper/package.json
+++ b/extensions/iceworks-style-helper/package.json
@@ -1,9 +1,9 @@
{
"name": "iceworks-style-helper",
- "displayName": "Iceworks Style Helper",
- "description": "Easily write styles in JSX.",
+ "displayName": "React Style Helper",
+ "description": "Easily write styles(CSS/Less/SASS).",
"publisher": "iceworks-team",
- "version": "0.3.1",
+ "version": "0.3.2",
"engines": {
"vscode": "^1.41.0"
},
@@ -17,8 +17,11 @@
"JSX",
"Inline Style",
"Style",
+ "SASS",
+ "Less",
"CSS",
- "ClassName"
+ "ClassName",
+ "iceworks"
],
"icon": "assets/logo.png",
"activationEvents": [
@@ -50,6 +53,7 @@
"@babel/parser": "^7.10.3",
"@babel/traverse": "^7.10.3",
"css": "^2.2.4",
+ "css-flatten": "^1.0.1",
"datauri": "^2.0.0",
"line-column": "^1.0.2",
"tinycolor2": "^1.4.1",
diff --git a/extensions/iceworks-style-helper/src/styleInfoViewer/findStyle.ts b/extensions/iceworks-style-helper/src/styleInfoViewer/findStyle.ts
index c6d09edeb..2ac2a6e5a 100644
--- a/extensions/iceworks-style-helper/src/styleInfoViewer/findStyle.ts
+++ b/extensions/iceworks-style-helper/src/styleInfoViewer/findStyle.ts
@@ -1,6 +1,7 @@
import * as fs from 'fs';
import * as path from 'path';
import css from 'css';
+import flatten from 'css-flatten';
import { IStyleDependency } from './findStyleDependencies';
// https://www.npmjs.com/package/css
@@ -29,10 +30,42 @@ export function findStyle(directory: string, className: string, styleDependencie
for (let i = 0, l = styleDependencies.length; i < l; i++) {
const file = path.join(directory, styleDependencies[i].source);
- const stylesheet = css.parse(fs.readFileSync(file, 'utf-8')).stylesheet;
-
- matched = stylesheet.rules.find(rule => rule.selectors && rule.selectors.includes(`.${className}`));
-
+ const fileContent = fs.readFileSync(file, 'utf-8');
+ let cssContent = fileContent;
+
+ if (
+ // SASS file
+ /s(c|a)ss$/.test(file) &&
+ // Not contain media and keyframes
+ fileContent.indexOf('@media') === -1 &&
+ fileContent.indexOf(' @keyframes') === -1
+ ) {
+ // Flattens nested SASS string
+ // https://www.npmjs.com/package/css-flatten
+ // Before:
+ // .foo {
+ // color: red;
+ // .bar {
+ // color: blue;
+ // }
+ // }
+ // After:
+ // .foo {
+ // color: red;
+ // }
+ // .foo .bar {
+ // color: blue;
+ // }
+ cssContent = flatten(fs.readFileSync(file, 'utf-8'));
+ }
+
+ const stylesheet = css.parse(cssContent).stylesheet;
+ matched = stylesheet.rules.find(
+ rule => rule.selectors &&
+ // Selector endWith className. Example: '.bar' can match '.foo .bar'.
+ rule.selectors.find(selector => selector.endsWith(className))
+ );
+
// Just find one matched stylesheet.
if (matched) {
matched.file = file;
diff --git a/extensions/iceworks-style-helper/tsconfig.json b/extensions/iceworks-style-helper/tsconfig.json
index ca734a741..be6e7d0be 100644
--- a/extensions/iceworks-style-helper/tsconfig.json
+++ b/extensions/iceworks-style-helper/tsconfig.json
@@ -6,7 +6,8 @@
"noImplicitAny": false,
"module": "commonjs",
"resolveJsonModule": true,
- "esModuleInterop": true
+ "esModuleInterop": true,
+ "skipLibCheck": true
},
"exclude": [
diff --git a/extensions/iceworks/CHANGELOG.md b/extensions/iceworks/CHANGELOG.md
index 0c71dd938..8f1090212 100644
--- a/extensions/iceworks/CHANGELOG.md
+++ b/extensions/iceworks/CHANGELOG.md
@@ -1,5 +1,9 @@
# Change Log
+## 0.2.0
+
+- docs: new logo and document
+
## 0.1.7
- docs: update sample image
diff --git a/extensions/iceworks/assets/logo.png b/extensions/iceworks/assets/logo.png
index 2004c78ce..ec1f07e3a 100644
Binary files a/extensions/iceworks/assets/logo.png and b/extensions/iceworks/assets/logo.png differ
diff --git a/extensions/iceworks/package.json b/extensions/iceworks/package.json
index 002b7e8f2..fbb34fd62 100644
--- a/extensions/iceworks/package.json
+++ b/extensions/iceworks/package.json
@@ -1,9 +1,9 @@
{
"name": "iceworks",
"displayName": "Iceworks",
- "description": "Universal Application Development Pack, using low-code technology.",
+ "description": "Universal Application Development Pack based on icejs and rax-app framework, provide visualization and intelligent technology to build Universal Application.",
"publisher": "iceworks-team",
- "version": "0.1.7",
+ "version": "0.2.0",
"engines": {
"vscode": "^1.41.0"
},
diff --git a/packages/page-service/package.json b/packages/page-service/package.json
index 33025add5..9082dd731 100644
--- a/packages/page-service/package.json
+++ b/packages/page-service/package.json
@@ -1,6 +1,6 @@
{
"name": "@iceworks/page-service",
- "version": "0.1.8",
+ "version": "0.1.9",
"description": "Iceworks page service for VSCode extension.",
"files": [
"lib"
diff --git a/packages/page-service/src/index.ts b/packages/page-service/src/index.ts
index b9d98d459..8165b8a09 100644
--- a/packages/page-service/src/index.ts
+++ b/packages/page-service/src/index.ts
@@ -2,11 +2,12 @@ import * as path from 'path';
import * as fsExtra from 'fs-extra';
import * as prettier from 'prettier';
import { IMaterialBlock } from '@iceworks/material-utils';
-import { pagesPath, COMPONENT_DIR_NAME, getProjectLanguageType } from '@iceworks/project-service';
+import { pagesPath, COMPONENT_DIR_NAME, getProjectLanguageType, getProjectFramework } from '@iceworks/project-service';
import { bulkGenerate } from '@iceworks/block-service';
import * as upperCamelCase from 'uppercamelcase';
import * as ejs from 'ejs';
-
+import reactPageTemplate from './templates/template.react';
+import vuePageTemplate from './templates/template.vue';
/**
* Generate page code based on blocks
*
@@ -27,22 +28,10 @@ export const generate = async function ({ pageName: name, blocks = [] }: { pageN
try {
await addBlocks(blocks, pageName);
+ const projectFramework = await getProjectFramework();
+ const isVueProjectFramework = projectFramework === 'vue';
+ const fileStr = isVueProjectFramework ? vuePageTemplate : reactPageTemplate;
- const fileStr = `import React, { Component } from 'react';
-<% for(var i = 0; i < blocks.length; i++) { -%>
-import <%= blocks[i].className %> from '<%= blocks[i].relativePath -%>';
-<% } -%>
-
-export default function () {
- return (
-
- <% for(var i = 0; i < blocks.length; i++){ -%>
- <% if (blocks[i].description) { %>{/* <%= blocks[i].description -%> */}<% } %>
- <<%= blocks[i].className -%> />
- <% } -%>
-
- );
-}`
const fileContent = ejs.compile(fileStr)({
blocks: blocks.map((block: any) => {
const blockName = upperCamelCase(block.name);
@@ -56,12 +45,13 @@ export default function () {
pageName,
});
const projectLanguageType = await getProjectLanguageType();
- const fileName = `index.${projectLanguageType}x`;
+ const fileName = isVueProjectFramework ? 'index.vue' : `index.${projectLanguageType}x`;
const dist = path.join(pagePath, fileName);
+ const prettierParserType = isVueProjectFramework ? 'vue' : 'babel';
const rendered = prettier.format(fileContent, {
singleQuote: true,
trailingComma: 'es5',
- parser: 'babel',
+ parser: prettierParserType,
});
await fsExtra.writeFile(dist, rendered, 'utf-8');
diff --git a/packages/page-service/src/templates/template.react.ts b/packages/page-service/src/templates/template.react.ts
new file mode 100644
index 000000000..c77aa4bfa
--- /dev/null
+++ b/packages/page-service/src/templates/template.react.ts
@@ -0,0 +1,17 @@
+const templateStr = `import React, { Component } from 'react';
+<% for(var i = 0; i < blocks.length; i++) { -%>
+import <%= blocks[i].className %> from '<%= blocks[i].relativePath -%>';
+<% } -%>
+
+export default function () {
+ return (
+
+ <% for(var i = 0; i < blocks.length; i++){ -%>
+ <% if (blocks[i].description) { %>{/* <%= blocks[i].description -%> */}<% } %>
+ <<%= blocks[i].className -%> />
+ <% } -%>
+
+ );
+}
+`
+export default templateStr;
\ No newline at end of file
diff --git a/packages/page-service/src/templates/template.vue.ts b/packages/page-service/src/templates/template.vue.ts
new file mode 100644
index 000000000..e0b9db83b
--- /dev/null
+++ b/packages/page-service/src/templates/template.vue.ts
@@ -0,0 +1,25 @@
+const template = `
+
+ <% for(var i = 0; i < blocks.length; i++){ -%>
+ <% if (blocks[i].description) { -%>
+ <% } -%>
+ <<%= blocks[i].className -%> />
+ <% } -%>
+
+
+
+`
+
+export default template;
diff --git a/packages/project-service/package.json b/packages/project-service/package.json
index ca29418b7..3f0cefa30 100644
--- a/packages/project-service/package.json
+++ b/packages/project-service/package.json
@@ -1,6 +1,6 @@
{
"name": "@iceworks/project-service",
- "version": "0.1.11",
+ "version": "0.1.12",
"description": "Iceworks project service for VSCode extension.",
"files": [
"lib"
diff --git a/packages/project-service/src/index.ts b/packages/project-service/src/index.ts
index 91c45a0cd..5a9d320f6 100644
--- a/packages/project-service/src/index.ts
+++ b/packages/project-service/src/index.ts
@@ -61,6 +61,9 @@ export async function getProjectFramework() {
if (devDependencies['ice.js'] || dependencies['ice.js']) {
return 'icejs';
}
+ if (dependencies.vue) {
+ return 'vue';
+ }
return 'unknown';
}
diff --git a/scripts/publish-extension.ts b/scripts/publish-extension.ts
index 6ab4b22ad..a08511ce9 100644
--- a/scripts/publish-extension.ts
+++ b/scripts/publish-extension.ts
@@ -13,7 +13,7 @@ function checkPackagePublished() {
const publishedPackages: string[] = getPublishedPackages();
const timeout = 10000;
- const maxDetectTimes = 18;
+ const maxDetectTimes = 30;
return Promise.all(publishedPackages.map((publishedPackage) => {
return new Promise((resolve, retject) => {
@@ -98,4 +98,5 @@ checkPackagePublished().then(() => {
});
}).catch((e) => {
console.error(e);
+ process.exit(1);
});