feat: new documentation, lots of small improvements

SAP · Jul 24, 2019 · 65982fd · 65982fd
1 parent 9f06d53
commit 65982fd
Show file tree

Hide file tree

Showing 420 changed files with 9,357 additions and 4,599 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,7 +1,8 @@
 module.exports = {
   root: true,
   env: {
-    node: true
+    browser: true,
+    es6: true
   },
   rules: {
     "max-len": "off",
@@ -20,6 +21,7 @@ module.exports = {
         jest: true
       }
     }
+
   ],
 
   extends: ["plugin:vue/essential", "@vue/prettier"]

diff --git a/.gitignore b/.gitignore
@@ -84,7 +84,6 @@ node_modules/
 
 ### VisualStudioCode ###
 .vscode/*
-!.vscode/settings.json
 #!.vscode/tasks.json
 #!.vscode/launch.json
 #!.vscode/extensions.json
@@ -98,3 +97,4 @@ node_modules
 tests/e2e/videos/*.mp4
 /api
 /tests/e2e/screenshots
+/.vscode/settings.json
diff --git a/.vscode/settings.json b/.vscode/settings.json
diff --git a/DEVELOPING.md b/DEVELOPING.md
@@ -0,0 +1,6 @@
+## Environment Variables used during the Build Process
+
+- `NODE_ENV` is required to be set
+- `BASE_URL` must be used to set the base url
+- If `FDD_PRERENDER` is set to `true` then a special Webpack configuration is used that will generate a static version of the documentation.
+- If `FDD_PRERENDER_TEST_RUN` is set to `true` then not all different routes are generated. There are a lot of routes and sometimes you only want to test if some routes still work. By setting this to `true` you tell the build process to only render a handful of pages per major route (`/api`, `/example`, `/examples`, …).
diff --git a/README.md b/README.md
@@ -30,7 +30,7 @@ Some prior knowledge of Vue is required for using this library.
 
 Paste the following snippet in your `<head>`-tag:
 
-```html
+```xml
 <link
     rel="stylesheet"
     href="https://unpkg.com/fiori-fundamentals@latest/dist/fiori-fundamentals.min.css"
@@ -41,7 +41,7 @@ Paste the following snippet in your `<head>`-tag:
 
 Then you can use Fundamental Vue like this:
 
-```html
+```xml
 <div id="app">
   <fd-popover v-fd-margin:large placement="bottom-start" with-arrow>
     <h1 v-fd-margin:large>
@@ -60,7 +60,7 @@ When using *Fundamental Vue* via a `<script>`-tag you don't have to install it m
 
 If you are targeting IE 11 you have to include the IE-compatible build of Fiori Fundamentals:
 
-```
+```xml
 <link rel="stylesheet" type="text/css" href="https://unpkg.com/fiori-fundamentals@latest/dist/fiori-fundamentals-ie11.min.css">
 ```
 
@@ -74,19 +74,18 @@ To download and use this library, you first need to install the node package man
 
     NPM
 
-    ```
+    ```bash
     $ npm install --save fundamental-vue
     ```
 
     After installing, you will need to import `fundamental-vue` and make it available to your Vue application. These instructions assume the usage of Vue CLI to scaffold your project.
 
     In your project's `main.js`:
 
-    ```
-    // ...
+    ```js
     import FundamentalVue from 'fundamental-vue';
     Vue.use(FundamentalVue);
-    // ...
+    // …
     ```
 
     Fundamental Vue does not include the ['Fiori Fundamentals' library](https://github.com/SAP/fundamental) which is required for styling.
@@ -95,21 +94,21 @@ To download and use this library, you first need to install the node package man
 
     The quickest way to get Fiori Fundamentals styling for your components is to include the compiled and minified Fiori Fundamentals CSS library with the following CDN link in your public `index.html` file:
 
-    ```
+    ```xml
     <link rel="stylesheet" type="text/css" href="https://unpkg.com/fiori-fundamentals@latest/dist/fiori-fundamentals.min.css">
     ```
 
     However, installing the Fiori Fundamentals library with npm (recommended) will give you the flexibility to use individual components and enable [advanced customisation options](https://github.com/SAP/fundamental/wiki/Advanced-Customization). In this case, you do not need the CDN link as this method uses the SASS/SCSS source.
 
     To install the Fiori Fundamentals SASS/SCSS source:
 
-    ```
+    ```sh
     $ npm install --save fiori-fundamentals
     ```
 
     The following assumes the usage of a module bundler such as [webpack](https://webpack.js.org/). To compile Fiori Fundamentals SASS/SCSS to CSS, two additional packages are required for your bundling process - [sass-loader](https://github.com/webpack-contrib/sass-loader) and [node-sass](https://github.com/sass/node-sass). To install these packages as development dependencies:
 
-    ```
+    ```sh
     $ npm install sass-loader node-sass --save-dev
     ```
 
@@ -119,37 +118,32 @@ To download and use this library, you first need to install the node package man
 
     Add the following to the main SCSS file:
 
-    ```
+    ```scss
     // If you are targeting IE 11 uncomment the following line.
     // $fd-support-css-var-fallback: true;
-
-    $fd-icons-path : "../node_modules/fiori-fundamentals/scss/icons/"; // should be declared before the scss import
-
+    // should be declared before the scss import
+    $fd-icons-path : "../node_modules/fiori-fundamentals/scss/icons/";
     $fd-scss-font-path : "../node_modules/fiori-fundamentals/scss/fonts/";
-
     @import "../node_modules/fiori-fundamentals/scss/all.scss";
     ```
 
     Import the main SCSS file in your `App.js` style block to add Fiori Fundamentals styles to your project.
 
-    ```
+    ```scss
     <style lang='scss'>
-    ...
     @import "./scss/main.scss";
-    ...
+    // …
     </style>
     ```
 
     You can now use the [Documentation](https://sap.github.io/fundamental-vue/) to browse the components currently available with Fundamental Vue.
 
     To use a Fundamental Vue component, paste the desired code snippet from the Playground and configure it as necessary:
 
-    ```
-    ...
-    <FdAlert dismissible>
-          Happy building! 🚀
-    </FdAlert>
-    ...
+    ```xml
+    <fd-alert dismissible>
+        Happy building! 🚀
+    </fd-alert>
     ```
 
 ## Versioning

diff --git a/SIZES.csv b/SIZES.csv
@@ -1,3 +1,4 @@
 DATE;NO;SIZE
 2019-04-21;0;38.73 KiB
 2019-04-21;1;38.39 KiB
+2019-07-24;0;41.8 kB
diff --git a/babel.config.js b/babel.config.js
@@ -1,29 +1,6 @@
-const nodeEnv = process.env.NODE_ENV;
-const targetsNetlify = process.argv[4] === "--NETLIFY";
-const mode =
-  nodeEnv !== "production" ? "dev" : targetsNetlify ? "netlify" : "prod";
-const appPresets = ["@vue/app"];
-if (process.env.VUE_CLI_BUILD_TARGET === "app") {
-  module.exports = {
-    presets: ["@vue/app"]
-  };
-  return;
-}
-
-const uiPresets = [
-  [
-    "@vue/app",
-    {
-      useBuiltIns: false,
-      polyfills: false,
-      corejs: 2
-    }
-  ]
-];
-
-const presets = mode === "prod" ? uiPresets : appPresets;
+/* eslint-env node */
 
 module.exports = {
-  presets,
+  presets: ["@vue/app"],
   plugins: ["@babel/plugin-syntax-dynamic-import"]
 };
diff --git a/bili-babel.config.js b/bili-babel.config.js
@@ -0,0 +1,17 @@
+/* eslint-env node */
+
+const presets = [
+  [
+    "@vue/app",
+    {
+      useBuiltIns: false,
+      polyfills: false,
+      corejs: 2
+    }
+  ]
+];
+
+module.exports = {
+  presets,
+  plugins: ["@babel/plugin-syntax-dynamic-import"]
+};
diff --git a/bili.config.js b/bili.config.js
@@ -1,4 +1,8 @@
+/* eslint-env node */
+
 const { version } = require("./package.json");
+const Path = require("path");
+const Process = require("process");
 
 /** @type {import('bili').Config} */
 module.exports = {
@@ -10,6 +14,10 @@ module.exports = {
  * LICENCE: Apache-2.0
  * https://github.com/SAP/fundamental-vue
 */`,
+  babel: {
+    configFile: Path.join(Process.cwd(), "bili-babel.config.js"),
+    babelrc: false
+  },
   plugins: {
     vue: true,
     commonjs: true

diff --git a/jest.config.js b/jest.config.js
@@ -15,23 +15,17 @@ module.exports = {
   moduleFileExtensions: ["js", "jsx", "json", "vue"],
   transform: {
     "^.+\\.vue$": "vue-jest",
-    ".+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$":
-      "jest-transform-stub",
+    ".+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$": "jest-transform-stub",
     "^.+\\.jsx?$": "babel-jest"
   },
   transformIgnorePatterns: ["/node_modules/"],
   moduleNameMapper: {
     "^@/(.*)$": "<rootDir>/src/$1"
   },
   snapshotSerializers: ["jest-serializer-vue"],
-  testMatch: [
-    "**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"
-  ],
+  testMatch: ["**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"],
   testURL: "http://localhost/",
-  watchPlugins: [
-    "jest-watch-typeahead/filename",
-    "jest-watch-typeahead/testname"
-  ],
+  watchPlugins: ["jest-watch-typeahead/filename", "jest-watch-typeahead/testname"],
   setupFiles: ["./jest.setup.js"],
   collectCoverage: false,
   collectCoverageFrom: ["src/**/*.{js,vue}", "!**/node_modules/**"],

diff --git a/loaders/block-loader.js b/loaders/block-loader.js
@@ -1,3 +1,5 @@
+/* eslint-env node */
+
 "use strict";
 
 const loaderUtils = require("loader-utils");

diff --git a/loaders/remove-docs-loader.js b/loaders/remove-docs-loader.js
@@ -1,3 +1,5 @@
+/* eslint-env node */
+
 "use strict";
 
 const contentWithoutBlock = (content, block) => {

diff --git a/loaders/tsconfig.json b/loaders/tsconfig.json
@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "noEmit": true,
+    "allowJs": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "resolveJsonModule": true,
+    "target": "es5",
+    "module": "esnext",
+    "strict": false,
+    "jsx": "preserve",
+    "importHelpers": false,
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "sourceMap": true,
+    "baseUrl": ".",
+    "types": [
+      "node",
+      "jest"
+    ],
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  },
+  "include": [
+    "*.js"
+  ]
+}
diff --git a/loaders/vuese-loader.js b/loaders/vuese-loader.js
@@ -0,0 +1,21 @@
+/* eslint-env node */
+/* eslint-disable no-console */
+"use strict";
+
+const parseResultFromSfc = require("./../src/tools/parse-result-from-sfc");
+
+module.exports = function(source, map) {
+  let parseResult = {};
+  try {
+    parseResult = parseResultFromSfc(source);
+  } catch (error) {
+    console.error("failed to parse sfc");
+    console.groupCollapsed();
+    console.log("source:", source);
+    console.groupEnd();
+    console.groupCollapsed();
+    console.error(error);
+    console.groupEnd();
+  }
+  this.callback(null /* no error */, "export default " + JSON.stringify(parseResult) + ";", map);
+};
diff --git a/netlify.toml b/netlify.toml
@@ -6,5 +6,5 @@
 #    that is where we will look for package.json/.nvmrc/etc not repo root!
 
 [build]
-  publish = "dist"
+  publish = "docs/dist"
   command = "yarn build:docs:netlify"