@atlaskit/editor-plugin-extension 21.1.7 → 22.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/dist/cjs/ui/ConfigPanel/ConfigPanelLoader.js +33 -10
  3. package/dist/es2019/ui/ConfigPanel/ConfigPanelLoader.js +17 -3
  4. package/dist/esm/ui/ConfigPanel/ConfigPanelLoader.js +29 -7
  5. package/dist/types/ui/ConfigPanel/ConfigPanelLoader.d.ts +4 -3
  6. package/example-utils/config-panel/ExtensionNodePicker.tsx +41 -6
  7. package/package.json +16 -15
package/CHANGELOG.md CHANGED
@@ -1,5 +1,23 @@
1
1
  # @atlaskit/editor-plugin-extension
2
2
 
3
+ ## 22.0.0
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 21.2.0
10
+
11
+ ### Minor Changes
12
+
13
+ - [`0e77112a573cc`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0e77112a573cc) -
14
+ Migrate the editor extension plugin's lazy-loaded configuration panel to react-loosely-lazy behind
15
+ the `platform_editor_loosely_lazy_migration` experiment.
16
+
17
+ ### Patch Changes
18
+
19
+ - Updated dependencies
20
+
3
21
  ## 21.1.7
4
22
 
5
23
  ### Patch Changes
package/dist/cjs/ui/ConfigPanel/ConfigPanelLoader.js CHANGED
@@ -6,18 +6,41 @@ Object.defineProperty(exports, "__esModule", {
6
6
  });
7
7
  exports.default = void 0;
8
8
  var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
9
+ var _react = _interopRequireDefault(require("react"));
9
10
  var _reactLoadable = _interopRequireDefault(require("react-loadable"));
11
+ var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
12
+ var _reactLooselyLazy = require("react-loosely-lazy");
10
13
  var _LoadingState = _interopRequireDefault(require("./LoadingState"));
11
- function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != (0, _typeof2.default)(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
12
- var _default_1 = (0, _reactLoadable.default)({
13
- loader: function loader() {
14
- return Promise.resolve().then(function () {
15
- return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_editor-core-config-panel" */
16
- './ConfigPanelFieldsLoader'));
17
- }).then(function (module) {
18
- return module.default;
19
- });
20
- },
14
+ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != (0, _typeof2.default)(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); } // oxlint-disable-next-line @atlassian/no-restricted-imports
15
+ var loadConfigPanel = function loadConfigPanel() {
16
+ return Promise.resolve().then(function () {
17
+ return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_editor-core-config-panel" */
18
+ './ConfigPanelFieldsLoader'));
19
+ }).then(function (module) {
20
+ return module.default;
21
+ });
22
+ };
23
+ var ConfigPanelLazy = (0, _reactLooselyLazy.lazyForPaint)(function () {
24
+ return Promise.resolve().then(function () {
25
+ return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_editor-core-config-panel" */
26
+ './ConfigPanelFieldsLoader'));
27
+ }).then(function (module) {
28
+ return module.default;
29
+ });
30
+ });
31
+ var ConfigPanelLoadable = (0, _reactLoadable.default)({
32
+ loader: loadConfigPanel,
21
33
  loading: _LoadingState.default
22
34
  });
35
+ var _default_1 = function _default_1(props) {
36
+ return (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_loosely_lazy_migration') ? /*#__PURE__*/_react.default.createElement(_reactLooselyLazy.LazySuspense, {
37
+ fallback: /*#__PURE__*/_react.default.createElement(_LoadingState.default, null)
38
+ }, /*#__PURE__*/_react.default.createElement(ConfigPanelLazy, props)) :
39
+ /*#__PURE__*/
40
+ // eslint-disable-next-line react/jsx-props-no-spreading
41
+ _react.default.createElement(ConfigPanelLoadable, props);
42
+ };
43
+ _default_1.preload = function () {
44
+ return (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_loosely_lazy_migration') ? ConfigPanelLazy.preload() : ConfigPanelLoadable.preload();
45
+ };
23
46
  var _default = exports.default = _default_1;
package/dist/es2019/ui/ConfigPanel/ConfigPanelLoader.js CHANGED
@@ -1,8 +1,22 @@
1
+ import React from 'react';
1
2
  import Loadable from 'react-loadable';
3
+ import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
4
+ // oxlint-disable-next-line @atlassian/no-restricted-imports
5
+ import { lazyForPaint, LazySuspense } from 'react-loosely-lazy';
2
6
  import LoadingState from './LoadingState';
3
- const _default_1 = Loadable({
4
- loader: () => import( /* webpackChunkName: "@atlaskit-internal_editor-core-config-panel" */
5
- './ConfigPanelFieldsLoader').then(module => module.default),
7
+ const loadConfigPanel = () => import( /* webpackChunkName: "@atlaskit-internal_editor-core-config-panel" */
8
+ './ConfigPanelFieldsLoader').then(module => module.default);
9
+ const ConfigPanelLazy = lazyForPaint(() => import( /* webpackChunkName: "@atlaskit-internal_editor-core-config-panel" */
10
+ './ConfigPanelFieldsLoader').then(module => module.default));
11
+ const ConfigPanelLoadable = Loadable({
12
+ loader: loadConfigPanel,
6
13
  loading: LoadingState
7
14
  });
15
+ const _default_1 = props => isExperimentEnabled('platform_editor_loosely_lazy_migration') ? /*#__PURE__*/React.createElement(LazySuspense, {
16
+ fallback: /*#__PURE__*/React.createElement(LoadingState, null)
17
+ }, /*#__PURE__*/React.createElement(ConfigPanelLazy, props)) :
18
+ /*#__PURE__*/
19
+ // eslint-disable-next-line react/jsx-props-no-spreading
20
+ React.createElement(ConfigPanelLoadable, props);
21
+ _default_1.preload = () => isExperimentEnabled('platform_editor_loosely_lazy_migration') ? ConfigPanelLazy.preload() : ConfigPanelLoadable.preload();
8
22
  export default _default_1;
package/dist/esm/ui/ConfigPanel/ConfigPanelLoader.js CHANGED
@@ -1,12 +1,34 @@
1
+ import React from 'react';
1
2
  import Loadable from 'react-loadable';
3
+ import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
4
+ // oxlint-disable-next-line @atlassian/no-restricted-imports
5
+ import { lazyForPaint, LazySuspense } from 'react-loosely-lazy';
2
6
  import LoadingState from './LoadingState';
3
- var _default_1 = Loadable({
4
- loader: function loader() {
5
- return import( /* webpackChunkName: "@atlaskit-internal_editor-core-config-panel" */
6
- './ConfigPanelFieldsLoader').then(function (module) {
7
- return module.default;
8
- });
9
- },
7
+ var loadConfigPanel = function loadConfigPanel() {
8
+ return import( /* webpackChunkName: "@atlaskit-internal_editor-core-config-panel" */
9
+ './ConfigPanelFieldsLoader').then(function (module) {
10
+ return module.default;
11
+ });
12
+ };
13
+ var ConfigPanelLazy = lazyForPaint(function () {
14
+ return import( /* webpackChunkName: "@atlaskit-internal_editor-core-config-panel" */
15
+ './ConfigPanelFieldsLoader').then(function (module) {
16
+ return module.default;
17
+ });
18
+ });
19
+ var ConfigPanelLoadable = Loadable({
20
+ loader: loadConfigPanel,
10
21
  loading: LoadingState
11
22
  });
23
+ var _default_1 = function _default_1(props) {
24
+ return isExperimentEnabled('platform_editor_loosely_lazy_migration') ? /*#__PURE__*/React.createElement(LazySuspense, {
25
+ fallback: /*#__PURE__*/React.createElement(LoadingState, null)
26
+ }, /*#__PURE__*/React.createElement(ConfigPanelLazy, props)) :
27
+ /*#__PURE__*/
28
+ // eslint-disable-next-line react/jsx-props-no-spreading
29
+ React.createElement(ConfigPanelLoadable, props);
30
+ };
31
+ _default_1.preload = function () {
32
+ return isExperimentEnabled('platform_editor_loosely_lazy_migration') ? ConfigPanelLazy.preload() : ConfigPanelLoadable.preload();
33
+ };
12
34
  export default _default_1;
package/dist/types/ui/ConfigPanel/ConfigPanelLoader.d.ts CHANGED
@@ -1,5 +1,6 @@
1
- import type { ComponentType } from 'react';
2
- import Loadable from 'react-loadable';
1
+ import { type ComponentType } from 'react';
3
2
  import type { PublicProps } from './ConfigPanelFieldsLoader';
4
- declare const _default_1: ComponentType<PublicProps> & Loadable.LoadableComponent;
3
+ declare const _default_1: ComponentType<PublicProps> & {
4
+ preload: () => unknown;
5
+ };
5
6
  export default _default_1;
package/example-utils/config-panel/ExtensionNodePicker.tsx CHANGED
@@ -17,7 +17,10 @@ import ButtonItem from '@atlaskit/menu/button-item';
17
17
  import HeadingItem from '@atlaskit/menu/heading-item';
18
18
  import MenuGroup from '@atlaskit/menu/menu-group';
19
19
  import Section from '@atlaskit/menu/section';
20
+ import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
20
21
  import { token } from '@atlaskit/tokens';
22
+ // oxlint-disable-next-line @atlassian/no-restricted-imports
23
+ import { lazyForPaint, LazySuspense } from 'react-loosely-lazy';
21
24
 
22
25
  import { useStateFromPromise } from '../../src/ui/ConfigPanel/use-state-from-promise';
23
26
 
@@ -29,6 +32,32 @@ export type CallbackParams = {
29
32
  parameters?: Parameters;
30
33
  };
31
34
 
35
+ type ExtensionIconLoader = NonNullable<ExtensionModule['icon']>;
36
+ type ExtensionIconComponents = {
37
+ lazy: React.ComponentType<{ label: string }>;
38
+ loadable: React.ComponentType<{ label: string }>;
39
+ };
40
+
41
+ const extensionIconComponents = new Map<ExtensionIconLoader, ExtensionIconComponents>();
42
+
43
+ const getExtensionIconComponents = (icon: ExtensionIconLoader): ExtensionIconComponents => {
44
+ const cachedComponents = extensionIconComponents.get(icon);
45
+ if (cachedComponents) {
46
+ return cachedComponents;
47
+ }
48
+
49
+ const components = {
50
+ lazy: lazyForPaint(icon),
51
+ loadable: Loadable<{ label: string }, never>({
52
+ loader: icon,
53
+ loading: () => null,
54
+ }),
55
+ };
56
+
57
+ extensionIconComponents.set(icon, components);
58
+ return components;
59
+ };
60
+
32
61
  export default function ExtensionNodePicker({
33
62
  selectedExtension,
34
63
  selectedNode,
@@ -103,12 +132,18 @@ export default function ExtensionNodePicker({
103
132
  const iconProp: { elemBefore?: ReactNode } = {};
104
133
 
105
134
  if (item.icon) {
106
- const ExtensionIcon = Loadable<{ label: string }, never>({
107
- loader: item.icon,
108
- loading: () => null,
109
- });
110
-
111
- iconProp['elemBefore'] = <ExtensionIcon label={action.key} />;
135
+ const { lazy: ExtensionIconLazy, loadable: ExtensionIconLoadable } =
136
+ getExtensionIconComponents(item.icon);
137
+
138
+ iconProp['elemBefore'] = isExperimentEnabled(
139
+ 'platform_editor_loosely_lazy_migration',
140
+ ) ? (
141
+ <LazySuspense fallback={null}>
142
+ <ExtensionIconLazy label={action.key} />
143
+ </LazySuspense>
144
+ ) : (
145
+ <ExtensionIconLoadable label={action.key} />
146
+ );
112
147
  }
113
148
 
114
149
  return (
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-extension",
3
- "version": "21.1.7",
3
+ "version": "22.0.0",
4
4
  "description": "editor-plugin-extension plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -36,18 +36,18 @@
36
36
  "@atlaskit/code": "^19.2.0",
37
37
  "@atlaskit/datetime-picker": "^18.7.0",
38
38
  "@atlaskit/editor-json-transformer": "^9.8.0",
39
- "@atlaskit/editor-plugin-analytics": "^18.0.0",
40
- "@atlaskit/editor-plugin-block-menu": "^17.0.0",
41
- "@atlaskit/editor-plugin-connectivity": "^18.0.0",
42
- "@atlaskit/editor-plugin-context-identifier": "^18.0.0",
43
- "@atlaskit/editor-plugin-context-panel": "^20.0.0",
44
- "@atlaskit/editor-plugin-copy-button": "^18.0.0",
45
- "@atlaskit/editor-plugin-decorations": "^18.0.0",
46
- "@atlaskit/editor-plugin-feature-flags": "^17.0.0",
47
- "@atlaskit/editor-plugin-mentions": "^20.2.0",
48
- "@atlaskit/editor-plugin-toolbar": "^15.0.0",
49
- "@atlaskit/editor-plugin-width": "^19.0.0",
50
- "@atlaskit/editor-prosemirror": "^8.0.0",
39
+ "@atlaskit/editor-plugin-analytics": "^19.0.0",
40
+ "@atlaskit/editor-plugin-block-menu": "^18.0.0",
41
+ "@atlaskit/editor-plugin-connectivity": "^19.0.0",
42
+ "@atlaskit/editor-plugin-context-identifier": "^19.0.0",
43
+ "@atlaskit/editor-plugin-context-panel": "^21.0.0",
44
+ "@atlaskit/editor-plugin-copy-button": "^19.0.0",
45
+ "@atlaskit/editor-plugin-decorations": "^19.0.0",
46
+ "@atlaskit/editor-plugin-feature-flags": "^18.0.0",
47
+ "@atlaskit/editor-plugin-mentions": "^21.0.0",
48
+ "@atlaskit/editor-plugin-toolbar": "^16.0.0",
49
+ "@atlaskit/editor-plugin-width": "^20.0.0",
50
+ "@atlaskit/editor-prosemirror": "^9.0.0",
51
51
  "@atlaskit/editor-shared-styles": "^4.3.0",
52
52
  "@atlaskit/editor-tables": "^3.2.0",
53
53
  "@atlaskit/empty-state": "^12.2.0",
@@ -71,7 +71,7 @@
71
71
  "@atlaskit/textfield": "^10.2.0",
72
72
  "@atlaskit/tmp-editor-statsig": "^199.0.0",
73
73
  "@atlaskit/toggle": "^17.3.0",
74
- "@atlaskit/tokens": "^18.1.0",
74
+ "@atlaskit/tokens": "^18.2.0",
75
75
  "@atlaskit/tooltip": "^24.3.0",
76
76
  "@atlaskit/user-picker": "^13.13.0",
77
77
  "@babel/runtime": "^7.0.0",
@@ -81,10 +81,11 @@
81
81
  "lodash": "^4.17.21",
82
82
  "memoize-one": "^6.0.0",
83
83
  "react-loadable": "^5.1.0",
84
+ "react-loosely-lazy": "^1.0.0",
84
85
  "uuid": "^11.1.1"
85
86
  },
86
87
  "peerDependencies": {
87
- "@atlaskit/editor-common": "^122.12.0",
88
+ "@atlaskit/editor-common": "^123.0.0",
88
89
  "react": "^18.2.0 || ^19.2.0",
89
90
  "react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
90
91
  },