Refactor vue file upload, setup ci

canopas · Jan 10, 2024 · 9c495ec · 9c495ec
1 parent e1b25c6
commit 9c495ec
Show file tree

Hide file tree

Showing 10 changed files with 117 additions and 72 deletions.
diff --git a/.github/workflows/react-publish.yml b/.github/workflows/react-publish.yml
@@ -0,0 +1,37 @@
+name: Publish React Package to npmjs
+
+on:
+  push:
+    # branches:
+    #   - main
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v3
+        with:
+          node-version: "20.x"
+          registry-url: "https://registry.npmjs.org"
+      - run: cd react
+      - run: npm ci
+      - run: npm run build
+
+      # Check if the version already exists on npm
+      - name: Check Version Existence
+        id: check_version
+        run: |
+          if npm show @canopassoftware/[email protected]; then
+            echo "Version already published. Skipping npm publish."
+            echo "::set-output name=skip_publish::true"
+          else
+            echo "::set-output name=skip_publish::false"
+          fi
+
+      # Publish only if the version check passed
+      - name: Publish to npm
+        if: steps.check_version.outputs.skip_publish != 'true'
+        run: npm publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
diff --git a/.github/workflows/vue-publish.yml b/.github/workflows/vue-publish.yml
@@ -0,0 +1,37 @@
+name: Publish Vue Package to npmjs
+
+on:
+  push:
+    # branches:
+    #   - main
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '20.x'
+          registry-url: 'https://registry.npmjs.org'
+      - run: cd vue
+      - run: npm ci
+      - run: npm run build
+
+      # Check if the version already exists on npm
+      - name: Check Version Existence
+        id: check_version
+        run: |
+          if npm show @canopassoftware/[email protected]; then
+            echo "Version already published. Skipping npm publish."
+            echo "::set-output name=skip_publish::true"
+          else
+            echo "::set-output name=skip_publish::false"
+          fi
+
+      # Publish only if the version check passed
+      - name: Publish to npm
+        if: steps.check_version.outputs.skip_publish != 'true'
+        run: npm publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
diff --git a/react/.github/workflows/publish.yml b/react/.github/workflows/publish.yml
diff --git a/react/package.json b/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@canopassoftware/react-file-upload",
-  "version": "1.2.0",
+  "version": "1.1.34",
   "description": "Show the preview of file and manage files data to upload",
   "main": "index.umd.js",
   "repository": {

diff --git a/vue/.npmignore b/vue/.npmignore
@@ -1,32 +1,2 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-
-node_modules
-.DS_Store
-/dist/*
-!/dist/output.css
-!/dist/style.scss
-dist-ssr
-coverage
-*.local
-
-/cypress/videos/
-/cypress/screenshots/
-
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
-
-src/assets/style.scss
+/*
+!/dist
diff --git a/vue/README.md b/vue/README.md
@@ -117,6 +117,14 @@ OR
 import { SingleFileUpload, MultipleFileUpload } from '@canopassoftware/vue-file-upload'
 ```
 
+### Use default CSS
+
+- Use `style.css` for UI by importing like,
+
+```js
+import "@canopassoftware/vue-file-upload/dist/style.css"
+```
+
 ### Creating custom UI with file preview
 
 - You can customize file uploading UI in `template` block.

diff --git a/vue/index.html b/vue/index.html
@@ -8,6 +8,6 @@
   </head>
   <body>
     <div id="app"></div>
-    <script type="module" src="/src/main.ts"></script>
+    <script type="module" src="/src/index.ts"></script>
   </body>
 </html>
diff --git a/vue/package.json b/vue/package.json
@@ -1,8 +1,8 @@
 {
   "name": "@canopassoftware/vue-file-upload",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "Show the preview of file and manage files data to upload",
-  "main": "src/main.ts",
+  "main": "./dist/index.umd.js",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/canopas/file-upload-web-frontend.git"
@@ -22,13 +22,14 @@
   "homepage": "https://github.com/canopas/file-upload-web-frontend#readme",
   "scripts": {
     "dev": "tailwindcss -i ./src/input.css -o ./dist/output.css && vite",
-    "build": "vite build && tailwindcss -i ./src/input.css -o ./dist/output.css --minify && cp ./src/assets/style.scss ./dist/style.scss",
+    "build": "npm run build-css && vite build && npm run build-css",
     "preview": "vite preview",
     "build-only": "vite build",
     "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
     "format": "prettier --write src/",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build-css": "tailwindcss -i ./src/input.css -o ./dist/output.css --minify && cp ./src/assets/style.scss ./dist/style.scss"
   },
   "dependencies": {
     "vue": "^3.3.4",

diff --git a/vue/src/main.ts → vue/src/index.ts b/vue/src/main.ts → vue/src/index.ts
diff --git a/vue/vite.config.ts b/vue/vite.config.ts
@@ -1,16 +1,29 @@
-import { fileURLToPath, URL } from 'node:url'
-
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
+import { defineConfig } from "vite";
+import { resolve } from "path";
+import vue from "@vitejs/plugin-vue";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [
-    vue(),
-  ],
-  resolve: {
-    alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url))
-    }
-  }
-})
+  plugins: [vue()],
+  build: {
+    lib: {
+      // src/indext.ts is where we have exported the component(s)
+      entry: resolve(__dirname, "src/index.ts"),
+      name: "@canopassoftware/vue-file-upload",
+      // the name of the output files when the build is run
+      fileName: "index",
+    },
+    rollupOptions: {
+      // make sure to externalize deps that shouldn't be bundled
+      // into your library
+      external: ["vue"],
+      output: {
+        // Provide global variables to use in the UMD build
+        // for externalized deps
+        globals: {
+          vue: "Vue",
+        },
+      },
+    },
+  },
+});