BREAKING CHANGE: remove unstable entrypoint (#3582)

- closed #3581
VKCOM · Nov 7, 2022 · 443fb21 · 443fb21
1 parent 13ddb1d
commit 443fb21
Show file tree

Hide file tree

Showing 13 changed files with 68 additions and 62 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -27,11 +27,7 @@
   "globals": {
     "Element": true
   },
-  "ignorePatterns": [
-    "unstable/**/*.ts",
-    "tokenized/**/*.ts",
-    "packages/**/*.ts"
-  ],
+  "ignorePatterns": ["tokenized/**/*.ts", "packages/**/*.ts"],
   "env": {
     "es6": true, // Enable global es6 variables, like Set, Map, etc
     "browser": true,
@@ -73,7 +69,6 @@
           "styles",
           "testing",
           "types",
-          "unstable",
           "tokenized"
         ],
         "patterns": [
@@ -88,7 +83,6 @@
           "styles/*",
           "testing/*",
           "types/*",
-          "unstable/*",
           "tokenized/*"
         ]
       }

diff --git a/e2e/styles.test.css b/e2e/styles.test.css
@@ -1,7 +1,6 @@
 /* import all global styles that are not imported by the components */
 @import "../src/styles/themes.css";
 @import "../src/styles/components.css";
-@import "../src/styles/unstable.css";
 
 @font-face {
   /* stylelint-disable-next-line */

diff --git a/package.json b/package.json
@@ -143,10 +143,6 @@
       "path": "dist/index.js",
       "brotli": true
     },
-    {
-      "name": "JS, unstable",
-      "path": "dist/unstable/index.js"
-    },
     {
       "name": "CSS",
       "path": "dist/vkui.css",
@@ -163,11 +159,6 @@
       "path": "dist/vkui.css",
       "webpack": false,
       "brotli": true
-    },
-    {
-      "name": "CSS, unstable",
-      "path": "dist/unstable.css",
-      "webpack": false
     }
   ],
   "scripts": {

diff --git a/src/index.ts b/src/index.ts
@@ -334,8 +334,6 @@ export { ViewWidth, ViewHeight, SizeType } from "./lib/adaptivity";
 export { getPlatformClassName } from "./helpers/getPlatformClassName";
 export type { AdaptivityProps } from "./components/AdaptivityProvider/AdaptivityContext";
 export { calcInitialsAvatarColor } from "./helpers/avatar";
-export { Popper } from "./components/Popper/Popper";
-export type { PopperProps } from "./components/Popper/Popper";
 export { getHoverClassName } from "./helpers/getHoverClassName";
 export { getMouseClassName } from "./helpers/getMouseClassName";
 export { getSizeXClassName } from "./helpers/getSizeXClassName";
@@ -355,3 +353,24 @@ export type { AlignType, HasPlatform, HasInsets } from "./types";
 export type { NavIdProps } from "./lib/getNavId";
 export type { PlatformType } from "./lib/platform";
 export type { TransitionContextProps } from "./components/NavTransitionContext/NavTransitionContext";
+
+/**
+ * Unstable
+ */
+export { ChipsSelect as unstable_ChipsSelect } from "./components/ChipsSelect/ChipsSelect";
+export type { ChipsSelectProps as unstable_ChipsSelectProps } from "./components/ChipsSelect/ChipsSelect";
+
+export { Popover as unstable_Popover } from "./components/Popover/Popover";
+export type { PopoverProps as unstable_PopoverProps } from "./components/Popover/Popover";
+
+export { TextTooltip as unstable_TextTooltip } from "./components/TextTooltip/TextTooltip";
+export type { TextTooltipProps as unstable_TextTooltipProps } from "./components/TextTooltip/TextTooltip";
+
+export { RichTooltip as unstable_RichTooltip } from "./components/RichTooltip/RichTooltip";
+export type { RichTooltipProps as unstable_RichTooltipProps } from "./components/RichTooltip/RichTooltip";
+
+export { Popper as unstable_Popper } from "./components/Popper/Popper";
+export type { PopperProps as unstable_PopperProps } from "./components/Popper/Popper";
+
+export { ViewInfinite as unstable_ViewInfinite } from "./components/View/ViewInfinite";
+export type { ViewInfiniteProps as unstable_ViewInfiniteProps } from "./components/View/ViewInfinite";
diff --git a/src/styles/components.css b/src/styles/components.css
@@ -155,6 +155,12 @@
 /* Advertisement */
 @import "../components/PromoBanner/PromoBanner.module.css";
 
+/* Unstable */
+@import "../components/ChipsSelect/ChipsSelect.module.css";
+@import "../components/Popover/Popover.module.css";
+@import "../components/TextTooltip/TextTooltip.module.css";
+@import "../components/RichTooltip/RichTooltip.module.css";
+
 /* Глобальные стили vkui.
  */
 @import "./common.css";
diff --git a/src/styles/unstable.css b/src/styles/unstable.css
diff --git a/src/unstable/index.ts b/src/unstable/index.ts
diff --git a/styleguide/Components/ComplexType/ComplexTypeRenderer.js b/styleguide/Components/ComplexType/ComplexTypeRenderer.js
@@ -1,6 +1,11 @@
 import React from "react";
-import { Text, useAdaptivity, getSizeXClassName, classNames } from "@vkui";
-import { TextTooltip } from "@vkui/unstable";
+import {
+  Text,
+  useAdaptivity,
+  getSizeXClassName,
+  classNames,
+  unstable_TextTooltip as TextTooltip,
+} from "@vkui";
 import { Icon16ErrorCircleOutline } from "@vkontakte/icons";
 import TypeRenderer from "../Type/TypeRenderer";
 import "./ComplexType.css";

diff --git a/styleguide/pages/migration_v5.md b/styleguide/pages/migration_v5.md
@@ -66,6 +66,24 @@ npx @vkontakte/vkui-token-translator
 
 <br/><br/>
 
+## Unstable
+
+Импорт нестабильных компонентов использует подход как в React (смотри [#3581](https://github.com/VKCOM/VKUI/issues/3581))
+
+```diff
+- import { ChipsSelect } from "@vkontakte/vkui/dist/unstable";
++ import { unstable_ChipsSelect as ChipsSelect } from "@vkontakte/vkui";
+```
+
+Нестабильные стили теперь находятся в `vkui.css`
+
+```diff
+import "@vkontakte/vkui/dist/vkui.css";
+- import "@vkontakte/vkui/dist/unstable.css";
+```
+
+<br/><br/>
+
 ## [`ConfigProvider`](#/ConfigProvider)
 
 - По умолчанию `appearance` определяется автоматически — в зависимости от темы, указанной в VK, или настроек ОС

diff --git a/styleguide/pages/unstable.md b/styleguide/pages/unstable.md
@@ -1,6 +1,5 @@
 В некоторых компонентах возникает потребность до того, как появится полноценное описание их работы. Бывает, что
-дизайн не финализирован, или не до конца ясно, что может и что не может делать компонент. Для таких случаев есть
-отдельная точка экспорта unstable.
+дизайн не финализирован, или не до конца ясно, что может и что не может делать компонент. Для таких случаев используется приставка `unstable_`
 
 Нестабильные компоненты могут менять внешнее API в пределах одной мажорной версии. То есть при их использовании нужно
 учитывать, что после очередного обновления минорной или патч-версии, в вашем приложении может возникнуть ошибка.
@@ -9,6 +8,5 @@
 Подключаются нестабильные компоненты путем подобного импорта:
 
 ```jsx static
-import { ChipsSelect } from "@vkontakte/vkui/dist/unstable";
-import "@vkontakte/vkui/dist/unstable.css"; // CSS достаточно подключить один раз
+import { unstable_ChipsSelect as ChipsSelect } from "@vkontakte/vkui";
 ```
diff --git a/styleguide/setup.js b/styleguide/setup.js
@@ -1,10 +1,8 @@
 import "../src/styles/themes.css";
-import "../src/styles/unstable.css";
 import "../src/styles/common.css";
 
 import { useState, useRef } from "react";
 import * as VKUI from "../src";
-import * as VKUIUnstable from "../src/unstable";
 import * as Icons from "@vkontakte/icons";
 import {
   getRandomInt,
@@ -16,11 +14,12 @@ import {
   perfLogger,
 } from "./utils";
 
-const ui = { ...VKUI, ...VKUIUnstable };
+const unstablePrefix = "unstable_";
+const ui = { ...VKUI };
 
-for (let i in ui) {
-  if (ui.hasOwnProperty(i)) {
-    window[i] = ui[i];
+for (let name in ui) {
+  if (ui.hasOwnProperty(name)) {
+    window[name.replace(unstablePrefix, "")] = ui[name];
   }
 }
 

diff --git a/styleguide/unstable.js b/styleguide/unstable.js
@@ -1,3 +1,7 @@
-import * as Unstable from "../src/unstable";
+import * as VKUI from "../src";
 
-export const unstable = Object.keys(Unstable);
+const unstablePrefix = "unstable_";
+
+export const unstable = Object.keys(VKUI)
+  .filter((name) => name.startsWith(unstablePrefix))
+  .map((name) => name.replace(unstablePrefix, ""));
diff --git a/webpack.styles.config.js b/webpack.styles.config.js
@@ -8,10 +8,8 @@ module.exports = {
   mode: "none",
   // TODO: Once CSS is modular, replace
   // './src/styles/components.css' -> './src/index.ts'
-  // './src/styles/unstable.css' -> './src/unstable/index.ts'
   entry: {
     stable: ["./src/styles/themes.css", "./src/styles/components.css"],
-    unstable: "./src/styles/unstable.css",
     components: "./src/styles/components.css",
   },
   output: {
@@ -37,9 +35,9 @@ module.exports = {
   },
   optimization: {
     splitChunks: {
-      chunks: (chunk) => ["stable", "unstable"].includes(chunk.name),
+      chunks: (chunk) => ["stable"].includes(chunk.name),
       cacheGroups: {
-        // capture all common deps between stable & unstable
+        // capture all common deps
         vkui: {
           name: "vkui",
           test: (module, { chunkGraph }) =>