feat: uodate to IMA@17

.eslintrc.js

@@ -14,7 +14,8 @@ module.exports = {
             allow: ['warn', 'error']
         }],
 
-        'react/wrap-multilines': 0
+        'react/wrap-multilines': 0,
+        'react/prop-types': 0
     },
     'plugins': [
         'prettier',

example/lib/componentPositions.js

@@ -1,4 +1,4 @@
-import { ComponentPositions } from '../../dist/main.js';
+import { ComponentPositions } from '../../dist/atoms.client.cjs.js';
 import _window from './windowMock';
 
 let componentPositions = new ComponentPositions(_window);

example/lib/uiComponentHelper.js

@@ -1,4 +1,4 @@
-import { UIComponentHelper } from '../../dist/main.js';
+import { UIComponentHelper } from '../../dist/atoms.client.cjs.js';
 import componentPositions from './componentPositions';
 import _router from './routerMock';
 import _window from './windowMock';

example/lib/visibility.js

@@ -1,5 +1,5 @@
 import { Window, Dispatcher } from '@ima/core';
-import { Visibility } from '../../dist/main.js';
+import { Visibility } from '../../dist/atoms.client.cjs.js';
 
 let visibility = new Visibility(new Window(), new Dispatcher());
 

gulpfile.js

@@ -1,14 +1,9 @@
-let del = require('del');
 let gulp = require('gulp');
-let babel = require('gulp-babel');
-let rename = require('gulp-rename');
 let path = require('path');
 let browserify = require('browserify');
 let babelify = require('babelify');
 let watchify = require('watchify');
 let fs = require('fs');
-let cache = require('gulp-cached');
-let remember = require('gulp-remember');
 let gulpLess = require('gulp-less');
 let b = null;
 
@@ -18,29 +13,8 @@ let gulpConfig = {
   }
 };
 
-exports.build = gulp.series(clean, compile, copy);
 exports.copy = copy;
 
-function compile() {
-  return gulp
-    .src('./src/**/*.{js,jsx}')
-    .pipe(cache('compile'))
-    .pipe(
-      babel({
-        moduleIds: true,
-        presets: ['@babel/preset-react'],
-        plugins: ['@babel/plugin-transform-modules-commonjs']
-      })
-    )
-    .pipe(remember('compile'))
-    .pipe(
-      rename(path => {
-        path.extname = '.js';
-      })
-    )
-    .pipe(gulp.dest('./dist'));
-}
-
 function bundle() {
   if (!b) {
     b = createBrowserifyInstance();
@@ -92,11 +66,7 @@ function copy() {
   return gulp.src(['./src/**/*.less']).pipe(gulp.dest('./dist'));
 }
 
-function clean() {
-  return del(['./dist']);
-}
-
-exports['dev'] = gulp.series(compile, less, bundle, dev);
+exports['dev'] = gulp.series(less, bundle, dev);
 function dev() {
   gulp.watch('./src/**/*.less', less);
   gulp.watch(
@@ -106,7 +76,7 @@ function dev() {
     },
     bundle
   );
-  gulp.watch('./src/**/*.{js,jsx}', gulp.series(compile, bundle));
+  gulp.watch('./src/**/*.{js,jsx}', gulp.series(bundle));
 }
 
 if (gulpConfig.onTerminate) {

index.client.cjs.js

@@ -0,0 +1,3 @@
+'use strict';
+
+module.exports = require('./dist/atoms.client.cjs.js');

index.server.cjs.js

@@ -0,0 +1,3 @@
+'use strict';
+
+module.exports = require('./dist/atoms.server.cjs.js');

index.server.esm.js

@@ -0,0 +1 @@
+export * from './dist/atoms.server.esm';

package.json

@@ -2,7 +2,9 @@
   "name": "@ima/plugin-atoms",
   "version": "1.3.0",
   "description": "IMA.js UI React atoms",
-  "main": "index.js",
+  "main": "index.server.cjs.js",
+  "browser": "index.client.cjs.js",
+  "module": "index.server.esm.js",
   "scripts": {
     "preversion": "npm test && npm run lint && npm run build",
     "postversion": "npm run build && npm run changelog && git commit -am $npm_package_version && git tag $npm_package_version && git push && git push --tags && npm publish",
@@ -11,7 +13,7 @@
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 1",
     "commit": "node_modules/.bin/git-cz",
     "copy": "node_modules/.bin/gulp copy",
-    "build": "node_modules/.bin/gulp build",
+    "build": "node_modules/.bin/rollup --config",
     "dev": "node_modules/.bin/gulp dev"
   },
   "keywords": [
@@ -39,6 +41,7 @@
     "@commitlint/cli": "^8.2.0",
     "@commitlint/config-conventional": "^8.2.0",
     "@ima/core": "17.0.1",
+    "@ima/helpers": "^17.0.1",
     "babel-eslint": "^10.0.3",
     "babel-jest": "^24.9.0",
     "babelify": "10.0.0",
@@ -47,7 +50,6 @@
     "commitizen": "^4.0.3",
     "conventional-changelog-cli": "^2.0.28",
     "cz-conventional-changelog": "^3.0.2",
-    "del": "5.1.0",
     "enzyme": "3.10.0",
     "enzyme-adapter-react-16": "^1.15.1",
     "enzyme-to-json": "^3.4.3",
@@ -59,17 +61,19 @@
     "eslint-plugin-prettier": "^3.1.1",
     "eslint-plugin-react": "^7.17.0",
     "gulp": "4.0.2",
-    "gulp-babel": "8.0.0",
-    "gulp-cached": "1.1.1",
     "gulp-less": "4.0.1",
-    "gulp-remember": "1.0.1",
-    "gulp-rename": "2.0.0",
     "husky": "^3.1.0",
     "ima-clientify": "^0.1.2",
     "jest": "^24.9.0",
     "prettier": "^1.19.1",
     "react": "^16.7.0",
     "react-dom": "^16.12.0",
+    "rollup": "^1.27.8",
+    "rollup-plugin-babel": "^4.3.3",
+    "rollup-plugin-jscc": "^1.0.0",
+    "rollup-plugin-json": "^4.0.0",
+    "rollup-plugin-node-resolve": "^5.2.0",
+    "rollup-plugin-replace": "^2.2.0",
     "to-mock": "^1.5.4",
     "watchify": "3.11.1"
   },
@@ -88,7 +92,7 @@
   },
   "peerDependencies": {
     "react": "16.x",
-    "ima": "17.x"
+    "@ima/core": "17.x"
   },
   "engines": {
     "npm": ">=4 <6"

rollup.config.js

@@ -0,0 +1,53 @@
+import resolve from 'rollup-plugin-node-resolve';
+import json from 'rollup-plugin-json';
+import jscc from 'rollup-plugin-jscc';
+import babel from 'rollup-plugin-babel';
+
+function generateConfig(environemnt) {
+  return {
+    external: [
+      'react',
+      'react-dom',
+      'infinite-circle',
+      '@ima/helpers',
+      '@ima/core'
+    ],
+    input: 'src/main.js',
+    treeshake: {
+      pureExternalModules: true
+    },
+    output: [
+      {
+        file: `./dist/atoms.${environemnt}.cjs.js`,
+        format: 'cjs',
+        exports: 'named'
+      },
+      {
+        file: `./dist/atoms.${environemnt}.esm.js`,
+        format: 'esm',
+        exports: 'named'
+      }
+    ],
+    plugins: [
+      resolve({
+        extensions: ['.mjs', '.js', '.jsx', '.json']
+      }),
+      babel({
+        moduleIds: true,
+        presets: ['@babel/preset-react']
+      }),
+      json({
+        preferConst: true, // Default: false
+        compact: true, // Default: false
+        namedExports: true // Default: true
+      }),
+      jscc({
+        values: { _SERVER: environemnt === 'server' }
+      })
+    ]
+  };
+}
+
+const config = [generateConfig('server'), generateConfig('client')];
+
+export default config;

src/headline/Headline.jsx

@@ -1,4 +1,4 @@
-import { PageContext, AbstractPureComponent } from '@ima/core';
+import { PageContext } from '@ima/core';
 import React from 'react';
 
 /**
@@ -7,7 +7,7 @@ import React from 'react';
  * @namespace ima.ui.atom.headline
  * @module ima.ui.atom
  */
-export default class Headline extends AbstractPureComponent {
+export default class Headline extends React.PureComponent {
   static get contextType() {
     return PageContext;
   }
@@ -27,7 +27,7 @@ export default class Headline extends AbstractPureComponent {
   render() {
     let headline = null;
     let { type: Type, id, mode, text, className, children, style } = this.props;
-    let helper = this.utils.$UIComponentHelper;
+    let helper = this.context.$Utils.$UIComponentHelper;
     let computedClassName = helper.cssClasses(
       {
         ['atm-headline']: true,

src/headline/Headline1.jsx

@@ -1,4 +1,3 @@
-import { AbstractPureComponent } from '@ima/core';
 import React from 'react';
 import Headline from './Headline';
 
@@ -8,7 +7,7 @@ import Headline from './Headline';
  * @namespace ima.ui.atom.headline
  * @module ima.ui.atom
  */
-export default class Headline1 extends AbstractPureComponent {
+export default class Headline1 extends React.PureComponent {
   render() {
     return <Headline {...this.props} type="h1" />;
   }

src/headline/Headline2.jsx

@@ -1,4 +1,3 @@
-import { AbstractPureComponent } from '@ima/core';
 import React from 'react';
 import Headline from './Headline';
 
@@ -8,7 +7,7 @@ import Headline from './Headline';
  * @namespace ima.ui.atom.headline
  * @module ima.ui.atom
  */
-export default class Headline2 extends AbstractPureComponent {
+export default class Headline2 extends React.PureComponent {
   render() {
     return <Headline {...this.props} type="h2" />;
   }

src/headline/Headline3.jsx

@@ -1,4 +1,3 @@
-import { AbstractPureComponent } from '@ima/core';
 import React from 'react';
 import Headline from './Headline';
 
@@ -8,7 +7,7 @@ import Headline from './Headline';
  * @namespace ima.ui.atom.headline
  * @module ima.ui.atom
  */
-export default class Headline3 extends AbstractPureComponent {
+export default class Headline3 extends React.PureComponent {
   render() {
     return <Headline {...this.props} type="h3" />;
   }

src/headline/Headline4.jsx

@@ -1,4 +1,3 @@
-import { AbstractPureComponent } from '@ima/core';
 import React from 'react';
 import Headline from './Headline';
 
@@ -8,7 +7,7 @@ import Headline from './Headline';
  * @namespace ima.ui.atom.headline
  * @module ima.ui.atom
  */
-export default class Headline4 extends AbstractPureComponent {
+export default class Headline4 extends React.PureComponent {
   render() {
     return <Headline {...this.props} type="h4" />;
   }

src/headline/Headline5.jsx

@@ -1,4 +1,3 @@
-import { AbstractPureComponent } from '@ima/core';
 import React from 'react';
 import Headline from './Headline';
 
@@ -8,7 +7,7 @@ import Headline from './Headline';
  * @namespace ima.ui.atom.headline
  * @module ima.ui.atom
  */
-export default class Headline5 extends AbstractPureComponent {
+export default class Headline5 extends React.PureComponent {
   render() {
     return <Headline {...this.props} type="h5" />;
   }

src/headline/Headline6.jsx

@@ -1,4 +1,3 @@
-import { AbstractPureComponent } from '@ima/core';
 import React from 'react';
 import Headline from './Headline';
 
@@ -8,7 +7,7 @@ import Headline from './Headline';
  * @namespace ima.ui.atom.headline
  * @module ima.ui.atom
  */
-export default class Headline6 extends AbstractPureComponent {
+export default class Headline6 extends React.PureComponent {
   render() {
     return <Headline {...this.props} type="h6" />;
   }

src/iframe/AmpIframe.jsx

@@ -1,4 +1,4 @@
-import { PageContext, AbstractPureComponent } from '@ima/core';
+import { PageContext } from '@ima/core';
 import React from 'react';
 
 // @server-side class AmpIframe extends __VARIABLE__ {__CLEAR__}\nexports.default = AmpIframe;
@@ -9,13 +9,14 @@ import React from 'react';
  * @namespace ima.ui.atom.iframe
  * @module ima.ui.atom
  */
-export default class AmpIframe extends AbstractPureComponent {
+export default class AmpIframe extends React.PureComponent {
+  //#if _SERVER
   static get contextType() {
     return PageContext;
   }
 
   render() {
-    let helper = this.utils.$UIComponentHelper;
+    let helper = this.context.$Utils.$UIComponentHelper;
     let {
       src,
       srcDoc,
@@ -62,4 +63,5 @@ export default class AmpIframe extends AbstractPureComponent {
       </amp-iframe>
     );
   }
+  //#endif
 }

src/iframe/HtmlIframe.jsx

@@ -1,4 +1,4 @@
-import { PageContext, AbstractPureComponent } from '@ima/core';
+import { PageContext } from '@ima/core';
 import React from 'react';
 import Sizer from '../sizer/Sizer';
 
@@ -11,7 +11,7 @@ const MIN_EXTENDED_PADDING = 500;
  * @module ima.ui.atom
  */
 
-export default class HtmlIframe extends AbstractPureComponent {
+export default class HtmlIframe extends React.PureComponent {
   static get contextType() {
     return PageContext;
   }
@@ -34,8 +34,8 @@ export default class HtmlIframe extends AbstractPureComponent {
 
     this._rootElement = React.createRef();
 
-    this._helper = this.utils.$UIComponentHelper;
-    this._settings = this.utils.$Settings;
+    this._helper = this.context.$Utils.$UIComponentHelper;
+    this._settings = this.context.$Utils.$Settings;
   }
 
   get useIntersectionObserver() {