feat(vue-socials): rewrite to vue 3

webistomin · Apr 24, 2021 · caa9f6e · caa9f6e
1 parent bef5329
commit caa9f6e
Show file tree

Hide file tree

Showing 122 changed files with 2,643 additions and 1,937 deletions.
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -1,15 +1,15 @@
-import BaseCanvas from './components/BaseCanvas.vue';
+// import BaseCanvas from './components/BaseCanvas.vue';
 
 export const parameters = {};
 
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-export const decorators = [function BaseCanvasDecorator() {
-  return {
-    components: { BaseCanvas },
-    template: `
-    <base-canvas>
-      <story/>
-    </base-canvas>
-  `,
-  };
-}];
+// export const decorators = [function BaseCanvasDecorator() {
+//   return {
+//     components: { BaseCanvas },
+//     template: `
+//     <base-canvas>
+//       <story/>
+//     </base-canvas>
+//   `,
+//   };
+// }];
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -58,7 +58,7 @@
     "prepare": "husky install"
   },
   "peerDependencies": {
-    "vue": "^2.6.12"
+    "vue": "^3.0.5"
   },
   "devDependencies": {
     "@babel/core": "^7.13.15",
@@ -80,9 +80,10 @@
     "@storybook/addon-links": "^6.2.8",
     "@storybook/addons": "^6.2.8",
     "@storybook/theming": "^6.2.8",
-    "@storybook/vue": "^6.2.8",
+    "@storybook/vue3": "^6.2.9",
     "@typescript-eslint/eslint-plugin": "^4.22.0",
     "@typescript-eslint/parser": "^4.22.0",
+    "@vue/compiler-sfc": "^3.0.11",
     "@vue/eslint-config-typescript": "^7.0.0",
     "agadoo": "^2.0.0",
     "babel-loader": "^8.2.2",
@@ -105,14 +106,13 @@
     "rollup": "^2.45.2",
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-vue": "^5.1.9",
+    "rollup-plugin-vue": "^6.0.0",
     "size-limit": "^4.10.2",
     "ts-node": "^9.1.1",
     "tsc-alias": "^1.2.9",
     "typescript": "^4.2.4",
-    "vue": "^2.6.12",
-    "vue-loader": "^15.9.6",
-    "vue-template-compiler": "^2.6.12"
+    "vue": "^3.0.5",
+    "vue-loader": "^15.9.6"
   },
   "engines": {
     "node": ">= 14.15.4",

diff --git a/src/components/SBlogger/SBlogger.ts b/src/components/SBlogger/SBlogger.ts
@@ -6,10 +6,8 @@
  * @example https://www.blogger.com/blog-this.g?u=https%3A%2F%2Fgithub.com%2F&t=Text&n=Title/
  */
 
-import Vue, {
-  CreateElement, VNode, VueConstructor,
-} from 'vue';
-import BaseSocial, { TBaseSocialMixin } from '@/mixins/BaseSocial/BaseSocial';
+import { defineComponent, VNode } from 'vue';
+import BaseSocial from '@/mixins/BaseSocial/BaseSocial';
 import getSerialisedParams from '@/utils/getSerialisedParams';
 
 /**
@@ -25,7 +23,7 @@ export interface ISBloggerShareOptions {
   text?: string;
 }
 
-export default /* #__PURE__ */ (Vue as VueConstructor<Vue & InstanceType<TBaseSocialMixin<ISBloggerShareOptions>>>).extend({
+export default /* #__PURE__ */ defineComponent({
   name: 'SBlogger',
 
   mixins: [BaseSocial<ISBloggerShareOptions>(
@@ -52,7 +50,7 @@ export default /* #__PURE__ */ (Vue as VueConstructor<Vue & InstanceType<TBaseSo
     },
   },
 
-  render(h: CreateElement): VNode {
-    return this.generateComponent(h, this.networkURL);
+  render(): VNode {
+    return this.generateComponent(this.networkURL);
   },
 });
diff --git a/src/components/SBlogger/docs/SBlogger.stories.ts b/src/components/SBlogger/docs/SBlogger.stories.ts
@@ -1,4 +1,4 @@
-import { Story } from '@storybook/vue';
+import { Story } from '@storybook/vue3';
 import { action } from '@storybook/addon-actions';
 import { DEFAULT_WINDOW_FEATURES, TBaseSocialPropsOptions } from '@/mixins/BaseSocial/BaseSocial';
 import SBlogger, { ISBloggerShareOptions } from '../SBlogger';
@@ -14,19 +14,28 @@ export default {
   },
 };
 
-const Template: Story<TBaseSocialPropsOptions<ISBloggerShareOptions>> = (_args, { argTypes }) => ({
-  props: Object.keys(argTypes),
+const Template: Story<TBaseSocialPropsOptions<ISBloggerShareOptions>> = (args) => ({
   components: { SBlogger },
-  methods: {
-    onClose: action('emit close'),
-    onOpen: action('emit open'),
-    onBlock: action('emit block'),
-    onFocus: action('emit focus'),
+
+  setup() {
+    const onClose = action('emit close');
+    const onOpen = action('emit open');
+    const onBlock = action('emit block');
+    const onFocus = action('emit focus');
+
+    return {
+      args,
+      onClose,
+      onOpen,
+      onBlock,
+      onFocus,
+    };
   },
+
   template: `
     <s-blogger
       class="base-social"
-      v-bind="$props"
+      v-bind="args"
       @popup-close="onClose"
       @popup-open="onOpen"
       @popup-block="onBlock"

diff --git a/src/components/SDevTo/SDevTo.ts b/src/components/SDevTo/SDevTo.ts
@@ -6,10 +6,8 @@
  * @example https://dev.to/new?prefill=%0A%20%20%20%20%20%20%20%20---%0A%20%20%20%20%20%20%20%20title%3ATitle%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20tags%3Atag%0A%20%20%20%20%20%20%20%20---%0A%20%20%20%20%20%20%20%20Text%201%0AText%202%0A%7B%25%20wikipedia%20https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FWikipedia%20%25%7D
  */
 
-import Vue, {
-  CreateElement, VNode, VueConstructor,
-} from 'vue';
-import BaseSocial, { TBaseSocialMixin } from '@/mixins/BaseSocial/BaseSocial';
+import { VNode, defineComponent } from 'vue';
+import BaseSocial from '@/mixins/BaseSocial/BaseSocial';
 import getSerialisedParams from '@/utils/getSerialisedParams';
 import getSeparatedList from '@/utils/getSeparatedList';
 
@@ -24,7 +22,7 @@ export interface ISDevToShareOptions {
   content?: string;
 }
 
-export default /* #__PURE__ */ (Vue as VueConstructor<Vue & InstanceType<TBaseSocialMixin<ISDevToShareOptions>>>).extend({
+export default /* #__PURE__ */ defineComponent({
   name: 'SDevTo',
 
   mixins: [BaseSocial<ISDevToShareOptions>(
@@ -58,7 +56,7 @@ export default /* #__PURE__ */ (Vue as VueConstructor<Vue & InstanceType<TBaseSo
     },
   },
 
-  render(h: CreateElement): VNode {
-    return this.generateComponent(h, this.networkURL);
+  render(): VNode {
+    return this.generateComponent(this.networkURL);
   },
 });
diff --git a/src/components/SDevTo/docs/SDevTo.stories.ts b/src/components/SDevTo/docs/SDevTo.stories.ts
@@ -1,4 +1,4 @@
-import { Story } from '@storybook/vue';
+import { Story } from '@storybook/vue3';
 import { action } from '@storybook/addon-actions';
 import { DEFAULT_WINDOW_FEATURES, TBaseSocialPropsOptions } from '@/mixins/BaseSocial/BaseSocial';
 import SDevTo, { ISDevToShareOptions } from '../SDevTo';
@@ -14,25 +14,33 @@ export default {
   },
 };
 
-const Template: Story<TBaseSocialPropsOptions<ISDevToShareOptions>> = (_args, { argTypes }) => ({
-  props: Object.keys(argTypes),
+const Template: Story<TBaseSocialPropsOptions<ISDevToShareOptions>> = (args) => ({
   components: { SDevTo },
-  methods: {
-    onClose: action('emit close'),
-    onOpen: action('emit open'),
-    onBlock: action('emit block'),
-    onFocus: action('emit focus'),
+
+  setup() {
+    const onClose = action('emit close');
+    const onOpen = action('emit open');
+    const onBlock = action('emit block');
+    const onFocus = action('emit focus');
+
+    return {
+      args,
+      onClose,
+      onOpen,
+      onBlock,
+      onFocus,
+    };
   },
+
   template: `
     <s-dev-to
       class="base-social"
-      v-bind="$props"
+      v-bind="args"
       @popup-close="onClose"
       @popup-open="onOpen"
       @popup-block="onBlock"
       @popup-focus="onFocus"
     >
-
     <svg viewBox="0 32 447.99999999999994 448" xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true" focusable="false">
       <path d="M120.12 208.29c-3.88-2.9-7.77-4.35-11.65-4.35H91.03v104.47h17.45c3.88 0 7.77-1.45 11.65-4.35s5.82-7.25 5.82-13.06v-69.65c-.01-5.8-1.96-10.16-5.83-13.06zM404.1 32H43.9C19.7 32 .06 51.59 0 75.8v360.4C.06 460.41 19.7 480 43.9 480h360.2c24.21 0 43.84-19.59 43.9-43.8V75.8c-.06-24.21-19.7-43.8-43.9-43.8zM154.2 291.19c0 18.81-11.61 47.31-48.36 47.25h-46.4V172.98h47.38c35.44 0 47.36 28.46 47.37 47.28zm100.68-88.66H201.6v38.42h32.57v29.57H201.6v38.41h53.29v29.57h-62.18c-11.16.29-20.44-8.53-20.72-19.69V193.7c-.27-11.15 8.56-20.41 19.71-20.69h63.19zm103.64 115.29c-13.2 30.75-36.85 24.63-47.44 0l-38.53-144.8h32.57l29.71 113.72 29.57-113.72h32.58z"/>
     </svg>

diff --git a/src/components/SDiaspora/SDiaspora.ts b/src/components/SDiaspora/SDiaspora.ts
@@ -6,10 +6,8 @@
  * @example https://share.diasporafoundation.org/?url=https%3A%2F%2Fgithub.com%2F&title=Title/
  */
 
-import Vue, {
-  CreateElement, VNode, VueConstructor,
-} from 'vue';
-import BaseSocial, { TBaseSocialMixin } from '@/mixins/BaseSocial/BaseSocial';
+import { VNode, defineComponent } from 'vue';
+import BaseSocial from '@/mixins/BaseSocial/BaseSocial';
 import getSerialisedParams from '@/utils/getSerialisedParams';
 
 /**
@@ -22,12 +20,11 @@ export interface ISDiasporaShareOptions {
   title: string;
 }
 
-export type TSDiasporaShareOptionsUrl = Omit<ISDiasporaShareOptions, 'url'>;
-export type TSDiasporaShareOptionsTitle = Omit<ISDiasporaShareOptions, 'title'>;
+type RequireAtLeastOne<T> = { [K in keyof T]-?: Required<Pick<T, K>> & Partial<Pick<T, Exclude<keyof T, K>>>; }[keyof T];
 
-export type TSDiasporaShareOptions = TSDiasporaShareOptionsUrl | TSDiasporaShareOptionsTitle;
+export type TSDiasporaShareOptions = RequireAtLeastOne<ISDiasporaShareOptions>;
 
-export default /* #__PURE__ */ (Vue as VueConstructor<Vue & InstanceType<TBaseSocialMixin<ISDiasporaShareOptions>>>).extend({
+export default /* #__PURE__ */ defineComponent({
   name: 'SDiaspora',
 
   mixins: [BaseSocial<TSDiasporaShareOptions>(
@@ -53,7 +50,7 @@ export default /* #__PURE__ */ (Vue as VueConstructor<Vue & InstanceType<TBaseSo
     },
   },
 
-  render(h: CreateElement): VNode {
-    return this.generateComponent(h, this.networkURL);
+  render(): VNode {
+    return this.generateComponent(this.networkURL);
   },
 });
diff --git a/src/components/SDiaspora/docs/SDiaspora.stories.ts b/src/components/SDiaspora/docs/SDiaspora.stories.ts
@@ -1,4 +1,4 @@
-import { Story } from '@storybook/vue';
+import { Story } from '@storybook/vue3';
 import { action } from '@storybook/addon-actions';
 import { DEFAULT_WINDOW_FEATURES, TBaseSocialPropsOptions } from '@/mixins/BaseSocial/BaseSocial';
 import SDiaspora, { TSDiasporaShareOptions } from '../SDiaspora';
@@ -14,19 +14,28 @@ export default {
   },
 };
 
-const Template: Story<TBaseSocialPropsOptions<TSDiasporaShareOptions>> = (_args, { argTypes }) => ({
-  props: Object.keys(argTypes),
+const Template: Story<TBaseSocialPropsOptions<TSDiasporaShareOptions>> = (args) => ({
   components: { SDiaspora },
-  methods: {
-    onClose: action('emit close'),
-    onOpen: action('emit open'),
-    onBlock: action('emit block'),
-    onFocus: action('emit focus'),
+
+  setup() {
+    const onClose = action('emit close');
+    const onOpen = action('emit open');
+    const onBlock = action('emit block');
+    const onFocus = action('emit focus');
+
+    return {
+      args,
+      onClose,
+      onOpen,
+      onBlock,
+      onFocus,
+    };
   },
+
   template: `
     <s-diaspora
       class="base-social"
-      v-bind="$props"
+      v-bind="args"
       @popup-close="onClose"
       @popup-open="onOpen"
       @popup-block="onBlock"

diff --git a/src/components/SDouban/SDouban.ts b/src/components/SDouban/SDouban.ts
@@ -6,10 +6,8 @@
  * @example https://accounts.douban.com/passport/login?redir=https%3A//www.douban.com/share/service%3Fname%3D%26href%3D%26image%3D%26updated%3D%26bm%3D%26name%3DTitle%26text%3DText%26comment%3Dhttps%253A%252F%252Fgithub.com%252F%26href%3Dhttps%253A%252F%252Fgithub.com%252F
  */
 
-import Vue, {
-  CreateElement, VNode, VueConstructor,
-} from 'vue';
-import BaseSocial, { TBaseSocialMixin } from '@/mixins/BaseSocial/BaseSocial';
+import { VNode, defineComponent } from 'vue';
+import BaseSocial from '@/mixins/BaseSocial/BaseSocial';
 import getSerialisedParams from '@/utils/getSerialisedParams';
 
 /**
@@ -21,7 +19,7 @@ export interface ISDoubanShareOptions {
   url?: string;
 }
 
-export default /* #__PURE__ */ (Vue as VueConstructor<Vue & InstanceType<TBaseSocialMixin<ISDoubanShareOptions>>>).extend({
+export default /* #__PURE__ */ defineComponent({
   name: 'SDouban',
 
   mixins: [BaseSocial<ISDoubanShareOptions>(
@@ -46,7 +44,7 @@ export default /* #__PURE__ */ (Vue as VueConstructor<Vue & InstanceType<TBaseSo
     },
   },
 
-  render(h: CreateElement): VNode {
-    return this.generateComponent(h, this.networkURL);
+  render(): VNode {
+    return this.generateComponent(this.networkURL);
   },
 });
diff --git a/src/components/SDouban/docs/SDouban.stories.ts b/src/components/SDouban/docs/SDouban.stories.ts
@@ -1,4 +1,4 @@
-import { Story } from '@storybook/vue';
+import { Story } from '@storybook/vue3';
 import { action } from '@storybook/addon-actions';
 import { TBaseSocialPropsOptions } from '@/mixins/BaseSocial/BaseSocial';
 import SDouban, { ISDoubanShareOptions } from '../SDouban';
@@ -14,19 +14,28 @@ export default {
   },
 };
 
-const Template: Story<TBaseSocialPropsOptions<ISDoubanShareOptions>> = (_args, { argTypes }) => ({
-  props: Object.keys(argTypes),
+const Template: Story<TBaseSocialPropsOptions<ISDoubanShareOptions>> = (args) => ({
   components: { SDouban },
-  methods: {
-    onClose: action('emit close'),
-    onOpen: action('emit open'),
-    onBlock: action('emit block'),
-    onFocus: action('emit focus'),
+
+  setup() {
+    const onClose = action('emit close');
+    const onOpen = action('emit open');
+    const onBlock = action('emit block');
+    const onFocus = action('emit focus');
+
+    return {
+      args,
+      onClose,
+      onOpen,
+      onBlock,
+      onFocus,
+    };
   },
+
   template: `
     <s-douban
       class="base-social"
-      v-bind="$props"
+      v-bind="args"
       @popup-close="onClose"
       @popup-open="onOpen"
       @popup-block="onBlock"