Merge pull request #162 from ecomfe/dev-ts

santd 2.0

Author: okaychen

.gitignore

@@ -6,6 +6,8 @@ output/
 node_modules/
 **/node_modules/
 dest/
+dist/
+types/
 build/
 npm-debug.log
 package-lock.json

package.json

@@ -1,6 +1,6 @@
 {
     "name": "santd",
-    "version": "1.1.3",
+    "version": "2.0.0-alpha.0",
     "description": "san UI design",
     "scripts": {
         "start": "cross-env NODE_ENV=development node scripts/preview.js",
@@ -13,14 +13,18 @@
         "dev:issue": "cross-env NODE_ENV=development node scripts/issue.js",
         "build:issue": "cross-env NODE_ENV=production webpack --config scripts/webpack.issue.conf.js",
         "lint:script": "fecs --type=js",
-        "lint:style": "stylelint \"{site, src}/**/*.less\" --syntax less"
+        "lint:style": "stylelint \"{site, src}/**/*.less\" --syntax less",
+        "build:cjs": "tsc -p tsconfig.json",
+        "build:esm": "tsc -p tsconfig.esm.json",
+        "build:ts": "sh scripts/build.sh"
     },
-    "main": "lib/index.js",
-    "module": "es/index.js",
+    "main": "dist/cjs/index.js",
+    "module": "dist/esm/index.js",
+    "types": "types",
     "files": [
-        "lib",
-        "es",
-        "dist"
+        "dist",
+        "types",
+        "src"
     ],
     "dependencies": {
         "@ant-design/icons": "^4.0.0-alpha.19",
@@ -34,8 +38,11 @@
         "enquire.js": "^2.1.6",
         "lodash": "^4.17.15",
         "resize-observer-polyfill": "^1.5.1",
+        "rollup-plugin-ts": "^3.2.0",
         "shallowequal": "^1.1.0",
-        "tinycolor2": "^1.4.1"
+        "tinycolor2": "^1.4.1",
+        "ts-loader": "^8.2.0",
+        "typescript": "^4.8.4"
     },
     "husky": {
         "hooks": {
@@ -60,6 +67,7 @@
         "@babel/traverse": "^7.4.4",
         "@babel/types": "^7.4.4",
         "@octokit/rest": "^16.35.2",
+        "@types/lodash": "^4.14.195",
         "autoprefixer": "^9.5.1",
         "babel-cli": "^6.26.0",
         "babel-eslint": "^10.0.3",
@@ -115,17 +123,18 @@
         "querystring": "^0.2.0",
         "rd": "^2.0.1",
         "rimraf": "^2.6.3",
-        "rollup": "^1.27.0",
-        "rollup-plugin-babel": "^4.3.3",
+        "rollup": "^2.60.0",
+        "rollup-plugin-babel": "^4.4.0",
         "rollup-plugin-banner": "^0.2.1",
         "rollup-plugin-commonjs": "^10.1.0",
         "rollup-plugin-node-resolve": "^5.2.0",
         "rollup-plugin-peer-deps-external": "^2.2.0",
         "rollup-plugin-postcss": "^2.0.3",
         "rollup-plugin-svgo": "^1.1.0",
         "rollup-plugin-terser": "^5.1.2",
+        "rollup-plugin-typescript2": "^0.35.0",
         "rucksack-css": "^1.0.2",
-        "san": "^3.10.1",
+        "san": "^3.12.2",
         "san-hot-reload-api": "^1.0.1",
         "san-loader": "^0.2.0",
         "san-router": "^1.2.0",

scripts/build.sh

@@ -0,0 +1,8 @@
+#!/bin/sh
+
+# 清空编译产物
+rm -rf dist types
+
+# 编译 ts
+pnpm build:esm
+pnpm build:cjs

scripts/lib/rollup.js

@@ -14,6 +14,7 @@ const commonjs = require('rollup-plugin-commonjs');
 const {terser} = require('rollup-plugin-terser');
 const svgo = require('rollup-plugin-svgo');
 const cssnano = require('cssnano');
+const rpt = require('rollup-plugin-ts');
 
 module.exports = async (dest, src) => {
     const inputOptions = {
@@ -25,16 +26,26 @@ module.exports = async (dest, src) => {
                 extract: true,
                 use: [['less', {javascriptEnabled: true}]]
             }),
+            svgo(),
+            rpt(),
             resolve(),
             commonjs(),
-            svgo(),
             babel({
                 presets: ['@babel/preset-env'],
                 plugins: [
                     'babel-plugin-transform-object-assign'
                 ]
             })
-        ]
+        ],
+        onwarn: function(warning, handler) {
+            // Skip certain warnings
+        
+            // should intercept ... but doesn't in some rollup versions
+            if ( warning.code === 'THIS_IS_UNDEFINED' ) { return; }
+        
+            // console.warn everything else
+            handler( warning );
+        }
     };
 
     const outputMin = {
@@ -50,7 +61,8 @@ module.exports = async (dest, src) => {
         file: path.join(dest, 'santd.js'),
         name: 'santd',
         exports: 'named',
-        format: 'umd'
+        format: 'umd',
+        // sourcemap: true,
     };
     const bundle = await rollup(inputOptions);
     await bundle.write(outputMin);

scripts/preview.js

@@ -55,7 +55,7 @@ if (componentName && fs.pathExistsSync(resolve(`./src/${componentName}`))) {
 
 function start(componentName) {
     return new Promise((resolve, reject) => {
-        const entry = `src/${componentName}/docs/index.js`;
+        const entry = `src/${componentName}/docs/index`;
         let config = merge(webpackConfig, {
             resolve: {
                 alias: {

scripts/release.js

@@ -274,7 +274,7 @@ async function genFiles(dest, src, version, pkg) {
     }
 
     console.log('starting package all in one file...');
-    await rollup(path.join(dest, 'dist'), path.join(src, 'index.js'));
+    await rollup(path.join(dest, 'dist'), path.join(src, 'index.ts'));
 }
 
 main();

scripts/webpack.base.conf.js

@@ -20,11 +20,11 @@ module.exports = {
         filename: '[name].js'
     },
     resolve: {
-        extensions: ['.js', '.san', '.less'],
+        extensions: ['.js', '.san', '.less', '.ts', '.tsx'],
         alias: {
-            san: isProduction ? 'san/dist/san.spa.min.js' : 'san/dist/san.spa.dev.js',
+            'san': isProduction ? 'san/dist/san.spa.min.js' : 'san/dist/san.spa.dev.js',
             'santd/es': resolve('./src'),
-            santd: resolve('./src')
+            'santd': resolve('./src')
         }
     },
     module: {
@@ -114,7 +114,12 @@ module.exports = {
                 use: {
                     loader: 'file-loader'
                 }
-            }
+            },
+            {
+                test: /\.tsx?$/,
+                use: 'ts-loader',
+                exclude: /node_modules/,
+            },
         ]
     },
     plugins: [

src/affix/docs/index.js src/affix/docs/index.ts

@@ -2,22 +2,22 @@
  * @file docs入口文件
  */
 
-import san from 'san';
+import Base from 'santd/base';
 import Head from './head.md';
 import Readme from '../README.md';
 import Basic from './basic.md';
 import OffsetTop from './offsetTop.md';
 import Target from './target.md';
 
-export default san.defineComponent({
-    components: {
+export default class extends Base {
+    static components = {
         head: Head,
         basic: Basic,
         readme: Readme,
         offset: OffsetTop,
         target: Target
-    },
-    template: `
+    }
+    static template = `
         <div>
             <head/>
             <basic/>
@@ -26,4 +26,4 @@ export default san.defineComponent({
             <readme/>
         </div>
     `
-});
+};

src/affix/index.js src/affix/index.ts

@@ -3,63 +3,59 @@
  * @author fuqiangqiang <[email protected]>
  */
 
-import san, {DataTypes} from 'san';
+import Base from 'santd/base';
 import {classCreator} from '../core/util';
 import {on, off, getScrollTop, getOffset} from '../core/util/dom';
 import './style/index';
+import {State, Props, ObjectDetail, Scroller}  from './interface'
 
 const outerCls = classCreator('affix-outer')();
 const innerCls = classCreator('affix')();
 
-export default san.defineComponent({
-    dataTypes: {
-        offsetTop: DataTypes.oneOfType([DataTypes.string, DataTypes.number]),
-        offsetBottom: DataTypes.oneOfType([DataTypes.string, DataTypes.number]),
-        target: DataTypes.func
-    },
-
-    initData() {
+export default class Affix extends Base<State, Props> {
+    _scroller: Scroller;
+    initData(): State {
         return {
             affix: false,
             styles: {},
             offsetTop: 0,
+            offsetBottom: 0,
             outerStyles: {}
         };
-    },
+    }
     attached() {
         if (!this._scroller) {
             this._scroller = this.handleScroll.bind(this);
 
-            const target = this.data.get('target');
+            const target: any = this.data.get('target');
             const element = target ? target() : window;
             on(element, 'scroll', this._scroller);
             on(element, 'resize', this._scroller);
         }
-    },
+    }
 
-    disposed() {
+    disposed(): void {
         if (this._scroller) {
             const target = this.data.get('target');
-            const element = target ? target() : window;
+            const element: any = target ? target() : window;
             off(element, 'scroll', this._scroller);
             off(element, 'resize', this._scroller);
-            this._scroller = null;
+            this._scroller = null as unknown as Scroller;
         }
-    },
+    }
 
     handleScroll() {
-        const target = this.data.get('target');
+        const target: any = this.data.get('target');
         const targetOffset = target && getOffset(target());
         const elOffset = getOffset(this.el);
         const scrollTop = getScrollTop();
-        const innerEl = this.ref('inner');
-
-        let offsetTop = +this.data.get('offsetTop');
-        let offsetBottom = +this.data.get('offsetBottom');
+        const innerEl: any = this.ref('inner');
+        let offsetTop = this.data.get('offsetTop') || 0;
+        let offsetBottom = this.data.get('offsetBottom') || 0;
         let isAffixBottom = offsetBottom >= 0;
 
         let affixTo = null;
-        let styles = {};
+        let styles: ObjectDetail = {};
         let outerStyles = {};
 
         if (isAffixBottom) {
@@ -106,13 +102,13 @@ export default san.defineComponent({
             this.data.set('affix', affixTo);
             this.fire('change', affixTo);
         }
-    },
+    }
 
-    template: `
+    static template = `
         <div class="${outerCls}" style="{{outerStyles}}">
             <div class="{{affix ? '${innerCls}' : ''}}" style="{{styles}}" s-ref="inner">
                 <slot></slot>
             </div>
         </div>
     `
-});
+};

src/affix/interface.ts

@@ -0,0 +1,21 @@
+export type Target = () => HTMLElement | Window;
+
+export type ObjectDetail = {[key: string]: string};
+
+export type Scroller = (() => void) | null | undefined;
+
+export interface State {
+    offsetBottom?: number;
+    offsetTop?: number;
+    affix?: boolean;
+    styles?: ObjectDetail;
+    outerStyles?: ObjectDetail;
+    
+}
+
+export interface Props {
+    offsetBottom?: number;
+    offsetTop?: number;
+    target?: Target;
+    styles?: ObjectDetail;
+}

src/affix/style/index.js src/affix/style/index.ts

@@ -1,9 +1,7 @@
 /**
- * @file 组件 alert
- * @author baozhixin <[email protected]>
- */
+ * @file Santd backtop docs file
+ **/
 
-import san from 'san';
 import Head from './head.md';
 import Basic from './basic.md';
 import Style from './style.md';
@@ -15,10 +13,10 @@ import Banner from './banner.md';
 import Smooth from './smooth-closed.md';
 import Custom from './custom-icon.md';
 import Readme from '../README.md';
-import './index.less';
+import Base from 'santd/base';
 
-export default san.defineComponent({
-    template: `
+export default class extends Base {
+    static template = `
         <div>
             <head/>
             <basic/>
@@ -32,8 +30,9 @@ export default san.defineComponent({
             <custom/>
             <readme/>
         </div>
-    `,
-    components: {
+    `;
+
+    static components = {
         head: Head,
         basic: Basic,
         style: Style,
@@ -45,5 +44,5 @@ export default san.defineComponent({
         smooth: Smooth,
         custom: Custom,
         readme: Readme
-    }
-});
+    };
+};