cloudinary · Jul 15, 2022 · Jul 14, 2022 · Jul 14, 2022 · Jul 14, 2022 · Jul 14, 2022
diff --git a/packages/vue3/.gitignore b/packages/vue3/.gitignore
@@ -0,0 +1,24 @@
+!public
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/packages/vue3/README.md b/packages/vue3/README.md
@@ -0,0 +1,29 @@
+# vue3
+
+## Project setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Run your unit tests
+```
+npm run test:unit
+```
+
+### Lints and fixes files
+```
+npm run lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).
diff --git a/packages/vue3/babel.config.js b/packages/vue3/babel.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+ presets: ["@vue/cli-plugin-babel/preset"],
+};
diff --git a/packages/vue3/package.json b/packages/vue3/package.json
@@ -0,0 +1,85 @@
+{
+ "name": "@cloudinary/vue3",
+ "version": "0.1.0",
+ "private": true,
+ "scripts": {
+ "build": "rm -rf dist && rollup -c && replace-in-files --string='.vue' --replacement='' dist/index.d.ts && npm run copy:dts",
+ "copy:dts": "cp dist/index.d.ts dist/index.esm.d.ts && cp dist/index.d.ts dist/index.ssr.d.ts",
+ "prepublishOnly": "npm run build",
+ "serve": "vue-cli-service serve",
+ "build:app": "vue-cli-service build",
+ "test": "npm run test:dist && npm run test:src",
+ "test:src": "vue-cli-service test:unit --coverage",
+ "pretest:src": "replace-in-files --string='dist/index.esm' --replacement='src/index' tests/unit/*.spec.ts",
+ "test:dist": "npm run build && vue-cli-service test:unit",
+ "pretest:dist": "replace-in-files --string='src/index' --replacement='dist/index.esm' tests/unit/*.spec.ts",
+ "serve:coverage": "http-server coverage/lcov-report",
+ "lint": "vue-cli-service lint"
+ },
+ "devDependencies": {
+ "@types/jest": "^27.0.1",
+ "@typescript-eslint/eslint-plugin": "^5.4.0",
+ "@typescript-eslint/parser": "^5.4.0",
+ "@vue/cli-plugin-babel": "~5.0.0",
+ "@vue/cli-plugin-eslint": "~5.0.0",
+ "@vue/cli-plugin-typescript": "~5.0.0",
+ "@vue/cli-plugin-unit-jest": "~5.0.0",
+ "@vue/cli-service": "~5.0.0",
+ "@vue/eslint-config-typescript": "^9.1.0",
+ "@vue/test-utils": "^2.0.0-0",
+ "@vue/vue3-jest": "^27.0.0-alpha.1",
+ "babel-jest": "^27.0.6",
+ "eslint": "^7.32.0",
+ "eslint-config-prettier": "^8.3.0",
+ "eslint-plugin-prettier": "^4.0.0",
+ "eslint-plugin-vue": "^8.0.3",
+ "http-server": "^14.1.1",
+ "jest": "^27.0.5",
+ "prettier": "^2.4.1",
+ "replace-in-files-cli": "^2.0.0",
+ "rollup": "^2.76.0",
+ "rollup-plugin-clear": "^2.0.7",
+ "rollup-plugin-typescript2": "^0.32.1",
+ "rollup-plugin-vue": "^6.0.0",
+ "ts-jest": "^27.0.4",
+ "typescript": "^4.7.4",
+ "vue": "^3.2.37",
+ "vue-tsc": "^0.38.5"
+ },
+ "eslintConfig": {
+ "root": true,
+ "env": {
+ "node": true
+ },
+ "extends": [
+ "plugin:vue/vue3-essential",
+ "eslint:recommended",
+ "@vue/typescript/recommended",
+ "plugin:prettier/recommended"
+ ],
+ "parserOptions": {
+ "ecmaVersion": 2020
+ },
+ "rules": {},
+ "overrides": [
+ {
+ "files": [
+ "**/__tests__/*.{j,t}s?(x)",
+ "**/tests/unit/**/*.spec.{j,t}s?(x)"
+ ],
+ "env": {
+ "jest": true
+ }
+ }
+ ]
+ },
+ "browserslist": [
+ "> 1%",
+ "last 2 versions",
+ "not dead",
+ "not ie 11"
+ ],
+ "jest": {
+ "preset": "@vue/cli-plugin-unit-jest/presets/typescript-and-babel"
+ }
+}
diff --git a/packages/vue3/public/favicon.ico b/packages/vue3/public/favicon.ico
diff --git a/packages/vue3/public/index.html b/packages/vue3/public/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="">
+ <head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width,initial-scale=1.0">
+ <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+ <title><%= htmlWebpackPlugin.options.title %></title>
+ </head>
+ <body>
+ <noscript>
+ <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+ </noscript>
+ <div id="app"></div>
+ <!-- built files will be auto injected -->
+ </body>
+</html>
diff --git a/packages/vue3/rollup.config.js b/packages/vue3/rollup.config.js
@@ -0,0 +1,62 @@
+import typescript from "rollup-plugin-typescript2";
+import vue from "rollup-plugin-vue";
+
+export default [
+ // ESM build to be used with webpack/rollup.
+ {
+ input: "src/index.ts",
+ output: {
+ format: "esm",
+ file: "dist/index.esm.js",
+ },
+ plugins: [
+ vue({ target: "browser" }),
+ typescript({
+ tsconfigOverride: {
+ compilerOptions: {
+ declaration: true,
+ },
+ include: null,
+ },
+ }),
+ ],
+ },
+ // SSR build.
+ {
+ input: "src/index.ts",
+ output: {
+ format: "cjs",
+ file: "dist/index.ssr.js",
+ },
+ plugins: [
+ vue({ target: "node" }), // use 'node' to compile for SSR
+ typescript({
+ tsconfigOverride: {
+ compilerOptions: {
+ declaration: true,
+ },
+ include: null,
+ },
+ }),
+ ],
+ },
+ // Browser build.
+ {
+ input: "src/index.ts",
+ output: {
+ format: "iife",
+ file: "dist/index.js",
+ },
+ plugins: [
+ vue({ target: "browser" }),
+ typescript({
+ tsconfigOverride: {
+ compilerOptions: {
+ declaration: true,
+ },
+ include: null,
+ },
+ }),
+ ],
+ },
+];
diff --git a/packages/vue3/src/App.vue b/packages/vue3/src/App.vue
@@ -0,0 +1,35 @@
+<template>
+ <div>
+ <AdvancedImage
+ url="https://res.cloudinary.com/demo/image/upload/sample.jpg"
+ />
+ </div>
+ <div>
+ <AdvancedVideo url="https://res.cloudinary.com/demo/video/upload/dog.mp4" />
+ </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import AdvancedImage from "@/components/AdvancedImage.vue";
+import AdvancedVideo from "@/components/AdvancedVideo.vue";
+
+export default defineComponent({
+ name: "App",
+ components: {
+ AdvancedImage,
+ AdvancedVideo,
+ },
+});
+</script>
+
+<style>
+#app {
+ font-family: Avenir, Helvetica, Arial, sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ text-align: center;
+ color: #2c3e50;
+ margin-top: 60px;
+}
+</style>
diff --git a/packages/vue3/src/components/AdvancedImage.vue b/packages/vue3/src/components/AdvancedImage.vue
@@ -0,0 +1,14 @@
+<template>
+ <img :src="url" />
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+ name: "AdvancedImage",
+ props: {
+ url: String,
+ },
+});
+</script>
diff --git a/packages/vue3/src/components/AdvancedVideo.vue b/packages/vue3/src/components/AdvancedVideo.vue
@@ -0,0 +1,14 @@
+<template>
+ <video :src="url" />
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+ name: "AdvancedVideo",
+ props: {
+ url: String,
+ },
+});
+</script>
diff --git a/packages/vue3/src/index.ts b/packages/vue3/src/index.ts
@@ -0,0 +1,4 @@
+import AdvancedImage from "./components/AdvancedImage.vue";
+import AdvancedVideo from "./components/AdvancedVideo.vue";
+
+export { AdvancedImage, AdvancedVideo };
diff --git a/packages/vue3/src/main.ts b/packages/vue3/src/main.ts
@@ -0,0 +1,4 @@
+import { createApp } from "vue";
+import App from "./App.vue";
+
+createApp(App).mount("#app");
diff --git a/packages/vue3/src/shims-vue.d.ts b/packages/vue3/src/shims-vue.d.ts
@@ -0,0 +1,6 @@
+/* eslint-disable */
+declare module '*.vue' {
+ import type { DefineComponent } from 'vue'
+ const component: DefineComponent<{}, {}, any>
+ export default component
+}
diff --git a/packages/vue3/tests/tsconfig.json b/packages/vue3/tests/tsconfig.json
@@ -0,0 +1,36 @@
+{
+ "compilerOptions": {
+ /* Set the JavaScript language version for emitted JavaScript and include
+ compatible library declarations. */
+ "target": "esnext",
+ /* Specify what JSX code is generated. */
+ "jsx": "preserve",
+ /* Specify what module code is generated. */
+ "module": "esnext",
+ /* Specify how TypeScript looks up a file from a given module specifier. */
+ "moduleResolution": "node",
+ /* Specify the base directory to resolve non-relative module names. */
+ "baseUrl": "./src",
+ /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
+ "declaration": true,
+ /* Create sourcemaps for d.ts files. */
+ "declarationMap": false,
+ /* Create source map files for emitted JavaScript files. */
+ "sourceMap": true,
+ /* Specify an output folder for all emitted files. */
+ "outDir": "dist",
+ /* Emit additional JavaScript to ease support for importing CommonJS modules.
+ This enables `allowSyntheticDefaultImports` for type compatibility. */
+ "esModuleInterop": true,
+ /* Ensure that casing is correct in imports. */
+ "forceConsistentCasingInFileNames": true,
+ /* Enable all strict type-checking options. */
+ "strict": true,
+ /* Skip type checking all .d.ts files. */
+ "skipLibCheck": true
+ },
+ "types": [
+ "jest"
+ ],
+ "include": ["../src/**/*.ts", "../src/**/*.vue", "**/*.ts"]
+}
diff --git a/packages/vue3/tests/unit/AdvancedImage.spec.ts b/packages/vue3/tests/unit/AdvancedImage.spec.ts
@@ -0,0 +1,12 @@
+import { shallowMount } from "@vue/test-utils";
+import { AdvancedImage } from "../../src/index";
+
+describe("AdvancedImage.vue", () => {
+ it("renders props.url when passed", () => {
+ const url = "https://res.cloudinary.com/demo/image/upload/sample.jpg";
+ const wrapper = shallowMount(AdvancedImage, {
+ props: { url },
+ });
+ expect(wrapper.html()).toMatch(url);
+ });
+});
diff --git a/packages/vue3/tests/unit/AdvancedVideo.spec.ts b/packages/vue3/tests/unit/AdvancedVideo.spec.ts
@@ -0,0 +1,12 @@
+import { shallowMount } from "@vue/test-utils";
+import { AdvancedVideo } from "../../src/index";
+
+describe("AdvancedVideo.vue", () => {
+ it("renders props.url when passed", () => {
+ const url = "https://res.cloudinary.com/demo/video/upload/dog.mp4";
+ const wrapper = shallowMount(AdvancedVideo, {
+ props: { url },
+ });
+ expect(wrapper.html()).toMatch(url);
+ });
+});