Merge pull request #94 from storyblok/adding-typescript

chore: TS support

lib/StoryblokComponent.vue

@@ -2,6 +2,11 @@
   <component :is="blok.component" v-bind="{ ...$props, ...$attrs }"></component>
 </template>
 
-<script setup>
-defineProps({ blok: Object });
+<script setup lang="ts">
+import type { SbBlokData } from "./types";
+
+export interface SbComponentProps {
+  blok: SbBlokData;
+}
+defineProps<SbComponentProps>();
 </script>

lib/cypress/plugins/index.js

@@ -12,7 +12,7 @@ module.exports = (on) => {
           "..",
           "..",
           "playground",
-          "vite.config.js"
+          "vite.config.ts"
         ),
       },
     });

lib/index.js → lib/index.ts

@@ -1,11 +1,21 @@
 import { ref, onMounted } from "vue";
+import type { Ref, Plugin, Directive } from "vue";
+
 import {
   storyblokEditable,
   storyblokInit,
   useStoryblokBridge,
 } from "@storyblok/js";
 
-const vEditableDirective = {
+import type {
+  StoryblokClient,
+  SbSDKOptions,
+  StoryblokBridgeConfigV2,
+  StoryData,
+  StoriesParams,
+} from "./types";
+
+const vEditableDirective: Directive<HTMLElement> = {
   beforeMount(el, binding) {
     if (binding.value) {
       const options = storyblokEditable(binding.value);
@@ -21,8 +31,8 @@ const printError = (fnName) => {
     `);
 };
 
-let storyblokApiInstance = null;
-export const useStoryblokApi = () => {
+let storyblokApiInstance: StoryblokClient = null;
+export const useStoryblokApi = (): StoryblokClient => {
   if (!storyblokApiInstance) printError("useStoryblokApi");
   return storyblokApiInstance;
 };
@@ -32,11 +42,11 @@ import StoryblokComponent from "./StoryblokComponent.vue";
 export { default as StoryblokComponent } from "./StoryblokComponent.vue";
 
 export const useStoryblok = async (
-  url,
-  apiOptions = {},
-  bridgeOptions = {}
+  url: string,
+  apiOptions: StoriesParams = {},
+  bridgeOptions: StoryblokBridgeConfigV2 = {}
 ) => {
-  const story = ref(null);
+  const story: Ref<StoryData> = ref(null);
 
   onMounted(() => {
     if (story.value && story.value.id) {
@@ -60,12 +70,14 @@ export const useStoryblok = async (
 };
 
 // Plugin
-export const StoryblokVue = {
-  install(app, pluginOptions = {}) {
+export const StoryblokVue: Plugin = {
+  install(app, pluginOptions: SbSDKOptions = {}) {
     app.directive("editable", vEditableDirective);
     app.component("StoryblokComponent", StoryblokComponent);
 
     const { storyblokApi } = storyblokInit(pluginOptions);
     storyblokApiInstance = storyblokApi;
   },
 };
+
+export * from "./types";

lib/package.json

@@ -1,9 +1,10 @@
 {
   "name": "@storyblok/vue",
-  "version": "6.0.0",
+  "version": "0.0.1",
   "description": "Storyblok directive for get editable elements.",
   "main": "./dist/storyblok-vue.js",
   "module": "./dist/storyblok-vue.mjs",
+  "types": "./dist/index.d.ts",
   "files": [
     "dist"
   ],
@@ -15,15 +16,15 @@
   },
   "scripts": {
     "dev": "vite build --watch",
-    "build": "vite build",
+    "build": "vite build && vue-tsc --declaration --emitDeclarationOnly",
     "test": "npm run test:unit && npm run test:e2e",
     "test:unit": "jest __tests__",
     "test:e2e": "cypress run-ct",
     "test:e2e-watch": "cypress open-ct",
     "prepublishOnly": "npm run build && cp ../README.md ./"
   },
   "dependencies": {
-    "@storyblok/js": "^1.2.0"
+    "@storyblok/js": "^1.6.1"
   },
   "devDependencies": {
     "@babel/core": "^7.18.5",
@@ -32,14 +33,17 @@
     "@vitejs/plugin-vue": "^2.3.3",
     "@vue/babel-preset-app": "^5.0.4",
     "@vue/test-utils": "next",
-    "babel-jest": "^28.1.0",
+    "@vue/tsconfig": "^0.1.3",
+    "babel-jest": "^26.0.0",
     "cypress": "^9.6.0",
     "eslint-plugin-cypress": "^2.12.1",
     "eslint-plugin-jest": "^26.1.5",
-    "jest": "^28.1.0",
+    "jest": "^26.1.0",
+    "typescript": "^4.7.3",
     "vite": "^2.9.9",
     "vue": "^3.2.33",
-    "vue-jest": "next"
+    "vue-jest": "next",
+    "vue-tsc": "^0.37.9"
   },
   "babel": {
     "presets": [

lib/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "module": "ESNext",
+    "target": "ESNext",
+    "strict": false,
+    "declaration": true,
+    "declarationDir": "dist",
+    "emitDeclarationOnly": true
+  },
+  "extends": "@vue/tsconfig/tsconfig.json",
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "display": "Vue",
+  "include": ["./*.vue", "./**/*.ts"],
+  "exclude": ["node_modules/*", "vite.config.ts", "dist"]
+}

lib/types.ts

@@ -0,0 +1,32 @@
+import type StoryblokComponent from "./StoryblokComponent.vue";
+
+declare module "@vue/runtime-core" {
+  export interface GlobalComponents {
+    StoryblokComponent: typeof StoryblokComponent;
+  }
+}
+
+export type {
+  AlternateObject,
+  Richtext,
+  RichtextInstance,
+  SbBlokData,
+  SbBlokKeyDataTypes,
+  SbSDKOptions,
+  Stories,
+  StoriesParams,
+  Story,
+  StoryData,
+  StoryParams,
+  StoryblokBridgeConfigV2,
+  StoryblokBridgeV2,
+  StoryblokCache,
+  StoryblokCacheProvider,
+  StoryblokComponentType,
+  StoryblokClient,
+  StoryblokConfig,
+  StoryblokManagmentApiResult,
+  StoryblokResult,
+  apiPlugin,
+  useStoryblokBridge,
+} from "@storyblok/js";

lib/vite.config.js → lib/vite.config.ts

@@ -8,7 +8,7 @@ export default defineConfig(() => {
   return {
     build: {
       lib: {
-        entry: path.resolve(__dirname, "index.js"),
+        entry: path.resolve(__dirname, "index.ts"),
         name: "storyblokVue",
         fileName: (format) => (format === "es" ? `${name}.mjs` : `${name}.js`),
       },