refactory project start

.gitignore

@@ -1,3 +1,13 @@
-.DS_Store
-.idea/
-node_modules/
+# Node modules
+node_modules/
+
+# Build folder
+Contents/
+
+# Ignore knowledge base for now until cleaned up :D
+knowledge/
+
+# Docs files
+docs/.sass-cache
+docs/_site
+.idea

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017 Zhenyu Hou
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,75 +1,3 @@
-Blade  V0.0.1
-==============
+# Blade 0.0.2
 
-**Blade is not working with the latest Sketch, but I'm rewriting it.**
-
-Blade is a Sketch 3 plugin for automatically HTML generating. It will generate tag `<div>` for group, tag `<p>` for text , etc.
-
-## Notice
-
- - This plugin works for **latest Sketch beta or version above 3.0.3(7882)** !!!.
- - This version is more stable now, but may still have problem with mega size sketch file.
- - Please group all you layer in one group and place it at coordinate (0,0) as the demo shows. - It does not work with artboard for now.
-
-
-## Quick start
-
-
- - Clone or download the repo.
- - Place everything in `dist` folder into your sketch plugin folder.[Where are sketch plugins?](http://bohemiancoding.com/sketch/support/developer/01-introduction/01.html)
- - Group all your layer in one group and run blade.
- - Blade will generate a new folder just in the same folder in which you put your sketch file.
-
-
-
-## Amazing features
-
-I uploaded a demo sketch file and the generated HTML files which shows some magic. Have a quick look here:
-
-### 1. My sketch file:
-
-<img width= "100%" src = "https://raw.githubusercontent.com/sskyy/blade/master/demo/1.png"/>
-
-You may notice the special layer names such as `[btn]` or `input[text]`. `[***]` is what I called `directive`, similar to AngularJS's directive. The directive will tell blade what kind of dom element should be generate or this layer. And some powerful directives may generate scripts to make element interactive.
-
-
-### 2. The Generated HTML:
-
-<img  width= "100%" src = "https://raw.githubusercontent.com/sskyy/blade/master/demo/2.png"/>
-
-As it shows, blade generate a input element for the layer which name is `input[text]` and a button for `[btn]`.
-
-### 3. What does `[case]` do?:
-
-<img  width= "100%" src = "https://raw.githubusercontent.com/sskyy/blade/master/demo/3.png"/>
-
-Press `shift` key down on the web page, then you will see the green border and two tabs, each one was generated for the layer which has directive `[case]`. Click the tab(don't release the `shift` before click) then you can change which should show as below:
-
-<img  width= "100%" src = "https://raw.githubusercontent.com/sskyy/blade/master/demo/4.png"/>
-
-## What's next?
-
-build-in directives:
-
- - [x] case
- - [x] btn
- - [x] center
- - [x] width
- - [x] height
- - [x] ignore
- - [x] a
- - [ ] checkbox
- - [ ] hover
- - [ ] alert
- - [ ] password
- - [ ] select
- - [ ] textarea
- - [ ] closeable
-
-I will continue write magic tags for blade, and trying to integrate AngularJS to help build better prototype。
-
-## How to contribute?
-
-- Install nodejs and [gulp](http://gulpjs.com/).
-- Enter into the repo folder and run `gulp`, then gulp will watch all the files in `src` and automatically build it into `dist` folder.
-- please feel free to contact me at any time if you have problem.
+Coming soon.

__tests__/sketchtool.test.js

@@ -0,0 +1,28 @@
+var sketchtool = require('../scripts/utils/sketchtool');
+
+var testFilePath = '__tests__/test.sketch';
+
+if (!sketchtool.check()) {
+  process.exit(1);
+}
+
+describe('Check if sketchtool is set up correctly', () => {
+  test('Can execute sketchtool', () => {
+    expect(sketchtool.exec('help')).toBeTruthy();
+  });
+
+  test('Sketch version can be retrieved', () => {
+    var version = sketchtool.getVersion();
+    expect(version).toBeTruthy();
+  });
+
+  test('Can dump load sketch files', () => {
+    var json = sketchtool.loadFile(testFilePath);
+  });
+
+  test('Can read dumped json', () => {
+    var json = sketchtool.loadFile(testFilePath);
+    expect(json.objectID).toBeTruthy();
+  });
+});
+

config/plugin/babel.js

@@ -0,0 +1,15 @@
+module.exports = {
+  presets: [
+    ['es2015', {
+      modules: false
+    }]
+  ],
+  'plugins': [
+    'transform-object-rest-spread',
+    ['module-resolver', {
+      alias: {
+        utils: './src/plugin/utils'
+      }
+    }]
+  ]
+}

config/plugin/eslint.js

@@ -0,0 +1,58 @@
+module.exports = {
+  extends: ['semistandard'],
+  globals: {
+    MSDocument: false,
+    MSDocumentWindow: false,
+    MSPage: false,
+    MSSymbolInstance: false,
+    MSSymbolMaster: false,
+    MSTextLayer: false,
+    NSAlert: false,
+    NSApp: false,
+    NSClassFromString: false,
+    NSColor: false,
+    NSData: false,
+    NSDocument: false,
+    NSDocumentController: false,
+    NSFileManager: false,
+    NSImage: false,
+    NSJSONSerialization: false,
+    NSMakeRect: false,
+    NSMutableData: false,
+    NSMutableURLRequest: false,
+    NSSaveOperation: false,
+    NSString: false,
+    NSTextField: false,
+    NSTextView: false,
+    NSThread: false,
+    NSTitledWindowMask: false,
+    NSURL: false,
+    NSURLRequest: false,
+    NSUTF8StringEncoding: false,
+    NSUserDefaults: false,
+    NSView: false,
+    NSViewHeightSizable: false,
+    NSViewWidthSizable: false,
+    NSWindow: false,
+    NSWorkspace: false,
+    WKWebView: false,
+    WKWebViewConfiguration: false,
+    Mocha: false,
+    log: false,
+    NSBackingStoreBuffered: false,
+    NSPanel: false,
+    NSResizableWindowMask: false,
+    NSWindowStyleMaskClosable: false,
+    SPBWebViewMessageHandler: false,
+    SPBWebViewMessageUtils: false
+  },
+  parser: 'babel-eslint',
+  plugins: [
+    'no-unused-vars-rest'
+  ],
+  rules: {
+    eqeqeq: [
+      0
+    ]
+  }
+}

config/plugin/paths.js

@@ -0,0 +1,21 @@
+var path = require('path');
+var fs = require('fs-extra');
+
+var appDirectory = fs.realpathSync(process.cwd());
+function resolveApp(relativePath) {
+  return path.resolve(appDirectory, relativePath);
+}
+
+var src = resolveApp('src/plugin');
+var frameworks = resolveApp('src/frameworks');
+
+module.exports = {
+  src,
+  entry: resolveApp('src/plugin/index.js'),
+  manifest: resolveApp('src/plugin/manifest.json'),
+  build: resolveApp('Contents/Sketch'),
+  bundle: resolveApp('sketch-plugin-boilerplate.sketchplugin'),
+  frameworks,
+  frameworksBuild: resolveApp('Contents/Resources/frameworks'),
+  watch: [src, frameworks]
+};

config/plugin/webpack.js

@@ -0,0 +1,37 @@
+var fs = require('fs-extra');
+var path = require('path');
+var chalk = require('chalk');
+var webpack = require('webpack');
+var objectAssign = require('object-assign');
+
+var paths = require('./paths');
+var babelConfig = require('./babel');
+
+var isDevelopment = process.env.NODE_ENV !== 'production';
+
+babelConfig = objectAssign(babelConfig, {
+  cacheDirectory: isDevelopment,
+});
+
+module.exports = {
+  entry: paths.entry,
+  output: {
+    path: paths.build,
+    filename: 'plugin.js',
+    library: 'handlers',
+    libraryTarget: 'var'
+  },
+  module: {
+    loaders: [
+      {
+        test: /\.(js|jsx)$/,
+        include: paths.src,
+        exclude: /(node_modules)/,
+        use: {
+          loader: 'babel-loader',
+          options: babelConfig
+        }
+      }
+    ]
+  }
+}

config/webview/babel.js

@@ -0,0 +1,19 @@
+module.exports = {
+  presets: ['react-app'],
+  plugins: [
+    'transform-object-rest-spread',
+    'transform-decorators-legacy',
+    ['module-resolver', {
+      alias: {
+        webview: './src/webview',
+        components: './src/webview/js/components',
+        actions: './src/webview/js/actions',
+        reducers: './src/webview/js/reducers',
+        utils: './src/webview/js/utils',
+        assets: './src/webview/assets',
+        styles: './src/webview/scss'
+      }
+    }]
+  ],
+  cacheDirectory: true
+}

config/webview/env.js

@@ -0,0 +1,88 @@
+const fs = require('fs-extra');
+const path = require('path');
+const paths = require('./paths');
+
+// Make sure that including paths.js after env.js will read .env variables.
+delete require.cache[require.resolve('./paths')];
+
+const NODE_ENV = process.env.NODE_ENV;
+if (!NODE_ENV) {
+  throw new Error(
+    'The NODE_ENV environment variable is required but was not specified.'
+  );
+}
+
+// https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
+var dotenvFiles = [
+  `${paths.dotenv}.${NODE_ENV}.local`,
+  `${paths.dotenv}.${NODE_ENV}`,
+  // Don't include `.env.local` for `test` environment
+  // since normally you expect tests to produce the same
+  // results for everyone
+  NODE_ENV !== 'test' && `${paths.dotenv}.local`,
+  paths.dotenv,
+].filter(Boolean);
+
+// Load environment variables from .env* files. Suppress warnings using silent
+// if this file is missing. dotenv will never modify any environment variables
+// that have already been set.
+// https://github.com/motdotla/dotenv
+dotenvFiles.forEach(dotenvFile => {
+  if (fs.existsSync(dotenvFile)) {
+    require('dotenv').config({
+      path: dotenvFile,
+    });
+  }
+});
+
+// We support resolving modules according to `NODE_PATH`.
+// This lets you use absolute paths in imports inside large monorepos:
+// https://github.com/facebookincubator/create-react-app/issues/253.
+// It works similar to `NODE_PATH` in Node itself:
+// https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
+// Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
+// Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
+// https://github.com/facebookincubator/create-react-app/issues/1023#issuecomment-265344421
+// We also resolve them to make sure all tools using them work consistently.
+const appDirectory = fs.realpathSync(process.cwd());
+process.env.NODE_PATH = (process.env.NODE_PATH || '')
+  .split(path.delimiter)
+  .filter(folder => folder && !path.isAbsolute(folder))
+  .map(folder => path.resolve(appDirectory, folder))
+  .join(path.delimiter);
+
+// Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
+// injected into the application via DefinePlugin in Webpack configuration.
+const REACT_APP = /^REACT_APP_/i;
+
+function getClientEnvironment(publicUrl) {
+  const raw = Object.keys(process.env)
+    .filter(key => REACT_APP.test(key))
+    .reduce(
+      (env, key) => {
+        env[key] = process.env[key];
+        return env;
+      },
+      {
+        // Useful for determining whether we’re running in production mode.
+        // Most importantly, it switches React into the correct mode.
+        NODE_ENV: process.env.NODE_ENV || 'development',
+        // Useful for resolving the correct path to static assets in `public`.
+        // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
+        // This should only be used as an escape hatch. Normally you would put
+        // images into the `src` and `import` them in code to get their paths.
+        PUBLIC_URL: publicUrl,
+      }
+    );
+  // Stringify all values so we can feed into Webpack DefinePlugin
+  const stringified = {
+    'process.env': Object.keys(raw).reduce((env, key) => {
+      env[key] = JSON.stringify(raw[key]);
+      return env;
+    }, {}),
+  };
+
+  return { raw, stringified };
+}
+
+module.exports = getClientEnvironment;