Merge pull request #199 from ckeditor/t/193

Prepare ground for v2

.eslintrc.json

@@ -1,15 +1,29 @@
 {
+	"parser": "@typescript-eslint/parser",
 	"extends": [
 		"eslint-config-ckeditor5",
-		"plugin:react/recommended"
+		"plugin:react/recommended",
+		"plugin:@typescript-eslint/recommended",
+		"plugin:react-hooks/recommended"
 	],
-
 	"settings": {
 		"react": {
-			"version": "16.x"
+			"version": "detect"
 		}
 	},
-
+	"rules": {
+		"@typescript-eslint/explicit-module-boundary-types": "off",
+		"@typescript-eslint/no-explicit-any": "off",
+		"no-use-before-define": "off",
+		"@typescript-eslint/no-use-before-define": [
+			"error",
+			{
+				"functions": false
+			}
+		],
+		"@typescript-eslint/ban-ts-comment": "off",
+		"@typescript-eslint/no-var-requires": "off"
+	},
 	"env": {
 		"browser": true
 	}

.github/workflows/test-all.yml

@@ -1,4 +1,4 @@
-name: Test browsers
+name: Test all
 
 on:
     pull_request:
@@ -15,15 +15,10 @@ on:
             - major
 
 jobs:
-    # Runs tests for selected React versions and all environments
-    # Top-level React version (as per package-lock.json) will be used for PRs. All versions of React will be tested otherwise.
-    test-all:
+    # Runs unit tests for all configured React version
+    test-units:
         runs-on: ubuntu-20.04
-        name: Run tests
-        strategy:
-            matrix:
-                browser: [BrowserStack_Edge, BrowserStack_Safari, BrowserStack_IE11, Chrome, Firefox, SSR]
-            fail-fast: false
+        name: Run unit tests
         steps:
             - name: Checkout code
               uses: actions/checkout@v2
@@ -34,27 +29,51 @@ jobs:
                   node-version: 14
 
             - name: Setup Chrome
-              if: matrix.browser == 'Chrome'
               uses: browser-actions/setup-chrome@latest
               with:
                   chrome-version: stable
 
-            - name: Setup Firefox
-              if: matrix.browser == 'Firefox'
-              uses: browser-actions/setup-firefox@latest
-              with:
-                  firefox-version: latest
-
             # Set variables required for further steps.
-            # CHROME_BIN and FIREFOX_BIN are required by Karma.
+            # CHROME_BIN is required by Karma.
             # REACT_VERSION is set to "current" for pull request events and "all" for other events.
-            # BUILD_SLUG corresponds to a BrowserStack job name. It's displayed as combination of repo name and short SHA.
             - name: Set test variables
               run: |
                   export CHROME_BIN=$(which chrome);
-                  export FIREFOX_BIN=$(which firefox);
                   if [ -z ${GITHUB_HEAD_REF} ]; then echo "REACT_VERSION=all"; else echo "REACT_VERSION=current"; fi >> $GITHUB_ENV;
+
+            - name: Install dependencies
+              run: npm install
+
+            # Run tests with the help of Xvfb, since there is no screen output available (required for locally installed browsers).
+            - name: Run tests
+              uses: GabrielBB/xvfb-action@v1
+              with:
+                  run: npm run test:units -- react ${{ env.REACT_VERSION }}
+
+    # Runs E2E tests for all configured React version and all environments
+    test-e2e:
+        runs-on: ubuntu-20.04
+        name: Run E2E tests
+        strategy:
+            matrix:
+                browser: [chrome, firefox, edge, ie, safari]
+            fail-fast: false
+        steps:
+            - name: Checkout code
+              uses: actions/checkout@v2
+
+            - name: Setup node
+              uses: actions/setup-node@v2
+              with:
+                  node-version: 14
+
+            # Set variables required for further steps.
+            # REACT_VERSION is set to "current" for pull request events and "all" for other events.
+            # BUILD_SLUG is a combination of repo name and short SHA.
+            - name: Set test variables
+              run: |
                   echo "BUILD_SLUG=$(echo $GITHUB_REPOSITORY | cut -d '/' -f2) $(echo $GITHUB_SHA | cut -c 1-7)" >> $GITHUB_ENV;
+                  if [ -z ${GITHUB_HEAD_REF} ]; then echo "REACT_VERSION=last-two"; else echo "REACT_VERSION=current"; fi >> $GITHUB_ENV;
 
             - name: Install dependencies
               run: npm install
@@ -65,5 +84,7 @@ jobs:
               env:
                   BROWSER_STACK_USERNAME: ${{ secrets.BROWSER_STACK_USERNAME }}
                   BROWSER_STACK_ACCESS_KEY: ${{ secrets.BROWSER_STACK_ACCESS_KEY }}
+                  BROWSER_STACK_BUILD_NAME: ${{ env.BUILD_SLUG }}
+                  BROWSER_STACK_BROWSER: ${{ matrix.browser }}
               with:
-                  run: npm run test:react-tester -- --react ${{ env.REACT_VERSION }}  --browser ${{ matrix.browser }}
+                  run: npm run test:e2e -- --react ${{ env.REACT_VERSION }}

.gitignore

@@ -2,7 +2,10 @@ node_modules/
 coverage/
 .DS_Store
 dist/
-sample/dist/
+samples-out
 react-tests/
 *debug.log
+.vscode
 local.log
+public
+.tmp*

CONTRIBUTING.md

@@ -0,0 +1,95 @@
+# Contributing
+
+### Install dependencies
+
+After cloning this repository, install necessary dependencies:
+
+```
+npm install
+```
+
+### Development
+
+```
+npm run develop
+```
+
+After running this command unit tests will start in watch mode and you are ready to develop. Please note that source code will be transpiled with `babel` so there is no type checking with TypeScript for this command. In order to validate types with TS run `npm run types:check` or run a full build (see below).
+
+By default Karma will run tests on Chrome so make sure that its binary is available on your system. If you have Chrome installed but Karma cannot find its binary for some reason, you might need to set `CHROME_BIN` environment variable, e.g. in your `.bashrc` file: `export CHROME_BIN=path_to_chrome_bin`.
+
+### Build
+
+#### Watch mode
+
+Run the following command in order to start builds in watch mode:
+
+```
+npm start
+```
+
+This command emits bundles in following formats: `umd`, `esm`, `cjs`. Type declarations are not be emitted.
+
+#### Run build once
+
+Run `npm run build` command to run build once. TypeScript declarations are emitted.
+
+### Tests
+
+#### Quick feedback
+
+As noted above, run `npm run develop` to quickly run a full suite of unit tests on currently installed React version.
+
+To run more a complete test script, just run the following command:
+
+```
+npm test
+```
+
+This command makes a single run of linter, type checker and unit tests.
+
+#### Full suite of unit tests
+
+In order to run unit tests on all supported React versions:
+
+```
+npm run test:units:all
+```
+
+#### Full suite of E2E tests
+
+E2E tests are to ensure that library _build files_ can be used with minimal setup on the consumer end and that they work on all supported browsers. E2E tests will run on examples inside `samples` directory. Tests will be run for each supported React version.
+
+All tests will run on BrowserStack, so make sure that environment variables `BROWSER_STACK_USERNAME` and `BROWSER_STACK_ACCESS_KEY` are set beforehand (values must be kept secret). In addition set `BROWSER_STACK_BROWSER` variable to one of the following values: `chrome`, `safari`, `ie`, `firefox`, `edge`.
+
+E2E tests are meant to run in CI environment but it's possible to run them locally as well. For example:
+
+```
+BROWSER_STACK_USERNAME=name BROWSER_STACK_ACCESS_KEY=key BROWSER_STACK_BROWSER=safari npm run test:e2e:all
+```
+
+Or for a single sample:
+
+```
+BROWSER_STACK_USERNAME=name BROWSER_STACK_ACCESS_KEY=key BROWSER_STACK_BROWSER=safari npm run test:e2e:all -- --sample basic
+```
+
+### Samples
+
+Before running any sample locally, make sure to expose root package as a link and build the library:
+
+```
+npm link && npm run build
+```
+
+It's enough to `npm link` the root package once. Run build on every change in root `src` folder.
+
+Example apps are located in `samples` directory. Each sample is a self-contained application that has mandatory `start` and `build` scripts. In order to run a sample go thorugh the following steps:
+
+1. `cd` into sample, e.g. `cd samples/basic`
+2. Run `npm install`
+3. Link root package: `npm link ckeditor4-react`
+4. Start example: `npm start`
+5. Navigate to `localhost:8080`
+
+It's important to re-run `npm link ckeditor4-react` in a sample folder anytime `npm install` operation was performed in that sample!

LICENSE.md

@@ -25,6 +25,9 @@ The following libraries are included in CKEditor 4 WYSIWYG editor component for
 - load-script
 - prop-types (c) 2013-present, Facebook, Inc.
 
+The following libraries are included in CKEditor 4 WYSIWYG editor component for React under the [0BSD license](https://opensource.org/licenses/0BSD):
+- tslib (c) Microsoft Corporation
+
 Trademarks
 ----------
 

README.md

@@ -30,47 +30,15 @@ See the [CKEditor 4 WYSIWYG Editor React Integration](https://ckeditor.com/docs/
 
 You can also check out [CKEditor 4 WYSIWYG Editor React Integration example](https://ckeditor.com/docs/ckeditor4/latest/examples/react.html) in [CKEditor 4 Examples](https://ckeditor.com/docs/ckeditor4/latest/examples/).
 
+See ready-to-fork examples in `samples` directory. Each sample is a self-contained app that can be [easily forked](https://docs.github.com/en/github/getting-started-with-github/splitting-a-subfolder-out-into-a-new-repository) within GitHub. Also, you can fork examples via services such as [CodeSandbox](https://codesandbox.io/).
+
 ## Browser support
 
 The CKEditor 4 React component works with all the [supported browsers](https://ckeditor.com/docs/ckeditor4/latest/guide/dev_browsers.html#officially-supported-browsers) except for Internet Explorer 8-10.
 
 ## Contributing
 
-After cloning this repository, install necessary dependencies:
-
-```
-npm install
-```
-
-### Executing tests
-
-```
-npm run test
-```
-
-The command above should be used to get a quick feedback on passing / failing tests. By default, tests on Chrome will be launched with locally installed version of React.
-
-Run `npm run test:all` to run tests on all supported versions of React. By default, test suite runs on Chrome but `browser` argument can be passed, e.g. `npm run test:all -- --browser Firefox`. See `scripts/react-tester.js` for details.
-
-If you are going to change the source files (ones located in the `src/` directory), remember about rebuilding the package. You can use `npm run develop` in order to do it automatically.
-
-### Running samples
-
-Samples uses development built version to simplify component testing. Run below command to open sample page in your default system browser:
-
-```
-npm run samples
-```
-
-Any component changes will be automatically rebuild.
-
-### Building the package
-
-Build a minified version of the package that is ready to publish:
-
-```
-npm run build
-```
+See [CONTRIBUTING.md](CONTRIBUTING.md).
 
 ## License