feat: release v3.0.0 (#13)

.babelrc

@@ -1,5 +1,13 @@
-
 {
-  "presets": ["es2015"],
-  "plugins": []
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
+        }
+      }
+    ]
+  ],
+  "plugins": ["@babel/plugin-transform-runtime"]
 }

.gitattributes

@@ -0,0 +1,2 @@
+.yarn/releases/** binary
+.yarn/plugins/** binary

.github/CODEOWNERS

@@ -0,0 +1,2 @@
+# Global Rule:
+* @sbolel

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,28 @@
+## Summary
+
+<!-- Overview of changes -->
+
+### Added
+
+<!-- List new features or components. Include a screenshot for new visual elements. -->
+
+### Changed
+
+<!-- List changes in existing functionality or design.
+If the change was visual, include a comparison screenshot showing the before and after the visual change. -->
+
+### Deprecated
+
+<!-- List once-stable features or components to be deprecated in this PR. -->
+
+### Removed
+
+<!-- List deprecated features or components removed in this PR. -->
+
+### Fixed
+
+<!-- List any bug fixes. -->
+
+## How to test
+
+<!-- Instructions on how to test the changes. This is not an exhaustive list of ways you should test this PR. -->

.github/dependabot.yml

@@ -0,0 +1,16 @@
+version: 2
+
+updates:
+  - package-ecosystem: 'npm'
+    directory: '/'
+    schedule:
+      interval: 'weekly'
+      day: 'friday'
+      time: '08:00'
+      timezone: 'America/New_York'
+    labels:
+      - 'dependencies'
+    rebase-strategy: 'auto'
+    reviewers:
+      - 'sbolel'
+    versioning-strategy: increase

.github/workflows/cicd.yaml

@@ -0,0 +1,63 @@
+name: CI/CD
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+    types:
+      - opened
+      - reopened
+      - synchronize
+
+jobs:
+  test_build_release:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [19]
+    env:
+      CI: true
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Setup Node.js and yarn
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'yarn'
+          cache-dependency-path: 'yarn.lock'
+
+      - name: Get yarn cache directory path
+        id: yarn-cache-path
+        run: echo "dir=$(yarn config get cacheFolder)" >> $GITHUB_OUTPUT
+
+      - name: Cache yarn packages
+        id: yarn-cache
+        uses: actions/cache@v3
+        with:
+          path: ${{ steps.yarn-cache-path.outputs.dir }}
+          key: node-${{ matrix.node-version }}-yarn-${{ hashFiles('**/yarn.lock', '.yarnrc.yml') }}
+          restore-keys: |
+            node-${{ matrix.node-version }}-yarn-
+
+      - name: Install dependencies
+        run: yarn install --immutable
+
+      - name: Lint
+        run: yarn lint
+
+      - name: Test
+        run: yarn test
+
+      - name: Build
+        run: yarn build
+
+      # semantic-release will only run on pushes to main (see package.json)
+      # - name: Release
+      #   run: yarn semantic-release
+      #   env:
+      #     GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -8,3 +8,51 @@ public/.git
 public/.gitignore
 public/dist
 public/lib
+
+# logs
+**/*.log
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+# node
+**/node_modules/
+dist
+dist-ssr
+*.local
+
+# editors
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# temporary
+tmp/
+**/temp/
+**/.cache/
+**/.temp/
+
+# macos
+**/.DS_Store
+
+# coverage and stats
+**/coverage/**
+.coverage
+stats.*
+
+# yarn
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

.npmignore

@@ -2,6 +2,7 @@
 .git
 .gitignore
 .npmignore
+.yarn
 circle.yml
 node_modules
 npm-debug.log

.yarnrc.yml

@@ -0,0 +1,9 @@
+enableTelemetry: false
+
+nodeLinker: node-modules
+
+plugins:
+  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
+    spec: "@yarnpkg/plugin-interactive-tools"
+
+yarnPath: .yarn/releases/yarn-3.6.0.cjs

README.md

@@ -3,7 +3,6 @@
 [![Build Status][build-image]][build-url]
 [![License][license-image]][license-url]
 [![NPM version][npm-image]][npm-url]
-[![Dependency Status][daviddm-image]][daviddm-url]
 [![Code Style][code-style-image]][code-style-url]
 [![NPM downloads][npm-downloads-image]][npm-url]
 
@@ -16,22 +15,31 @@ _Add multiple [Panolens.js](https://github.com/sbolel/panolens.js) 360-panoramic
 
 You can either install via npm and include the scripts in your build process, or use a CDN.
 
-* **Using npm packages**, first install dependencies
+* **Using npm packages**
 
-      npm install --save panolens.js pano
+  Install dependencies
 
-  Then, include the scripts in your HTML: 
+    ```bash
+    # with yarn
+    yarn add pano
 
-    ```html
-    <script type="text/javascript" src="node_modules/panolens.js/panolens.min.js"></script>
-    <script type="text/javascript" src="node_modules/pano/dist/pano.min.js"></script>
+    # with npm
+    npm install --save pano
+    ```
+
+  Import Pano
+
+    ```js
+    import * as Pano from 'pano'
     ```
 
-* **Using the CDN**, include scripts via CDN by adding them to your `index.html`:
+* **Using the CDN**
+
+  Include scripts via CDN by adding them to your `index.html`:
 
   ```html
-  <script type="text/javascript" src="//sinanbolel.firebaseapp.com/cdn/panolens-1.0.1-beta.min.js"></script>
-  <script type="text/javascript" src="//sinanbolel.firebaseapp.com/cdn/pano-2.0.0.min.js"></script>
+  <script type="text/javascript" src="//sinanbolel.firebaseapp.com/cdn/pano-vendor-v3.0.0.min.js"></script>
+  <script type="text/javascript" src="//sinanbolel.firebaseapp.com/cdn/pano-v3.0.0.min.js"></script>
   ```
 
 ## Usage
@@ -52,13 +60,13 @@ You can either install via npm and include the scripts in your build process, o
 
 2. Add `<pano>` elemement HTML
 
-  * Include the required `width`, `height`, `src`, `caption` (optional) attributes for the `<pano>` element(s) in your view:
+    Include the required `width`, `height`, `src`, `caption` (optional) attributes for the `<pano>` element(s) in your view:
 
     ```html
     <pano width="1024" height="512" src="https://sbolel.github.io/pano/img/588ca1b0bf_o.jpg" caption="Equirectangular Panorama"/></pano>
     ```
 
-3. Initialize all `<pano>` elements on the page
+1. Initialize all `<pano>` elements on the page
 
     ```js
     var panoPage = new Pano.Page('pano')

bin/create-webpack-config.cjs

@@ -0,0 +1,121 @@
+/**
+ * Create Webpack Configuration
+ * @param {Object} options
+ * @param {boolean} options.dev
+ * @param {string} options.target
+ * @returns {Object}
+ */
+const path = require('path')
+const webpack = require('webpack')
+const TerserPlugin = require('terser-webpack-plugin')
+const pkg = require('../package.json')
+
+// paths
+const buildPath = 'dist'
+const publicPath = 'assets'
+
+/**
+ * Create Webpack Configuration
+ * @param {Object} options - options object
+ * @param {boolean} options.dev - development mode
+ * @param {string} options.target - target
+ * @returns {Object}
+ * @example
+ *  const webpack = require('webpack')
+ *  const createWebpackConfig = require('./create-webpack-config')
+ *  const webpackConfig = createWebpackConfig({ dev: true, target: 'web' })
+ *  webpack(webpackConfig, (err, stats) => {
+ *    if (err || stats.hasErrors()) {
+ *      // Handle errors here
+ *    }
+ *    // Done processing
+ *  })
+ */
+const createWebpackConfig = (options = {}) => {
+  /**
+   * Get chunk name with the correct extension
+   * @param {Object} chunkData - chunk data
+   * @param {Object} chunkData.chunk - chunk object
+   * @param {string} chunkData.chunk.name - chunk name
+   * @returns {string} chunk name
+   */
+  const getChunkName = ({ chunk: { name = '' } } = {}) => {
+    if (!name) throw new Error('Chunk name is required')
+    const ext = options.dev ? '.js' : '.min.js'
+    return name === 'main' ? `pano${ext}` : `pano-[name]${ext}`
+  }
+
+  return {
+    target: options.target,
+    devtool: options.dev ? 'eval-source-map' : 'source-map',
+    mode: options.dev ? 'development' : 'production',
+    module: {
+      rules: [
+        {
+          exclude: /node_modules/,
+          use: ['babel-loader'],
+          test: /\.js$/,
+        },
+      ],
+    },
+    output: {
+      filename: getChunkName,
+      library: {
+        name: 'Pano',
+        type: 'umd',
+      },
+      path: path.resolve(__dirname, '..', buildPath),
+      publicPath: `/${buildPath}/`,
+    },
+    plugins: [
+      new webpack.BannerPlugin({
+        banner: `pano.js v${pkg.version} | (c) Sinan Bolel & Prescott Prue`,
+        entryOnly: true,
+        raw: false,
+      }),
+      new webpack.EnvironmentPlugin({
+        npm_lifecycle_event: '', // override to avoid error
+      })
+    ],
+    resolve: {
+      alias: {
+        assets: path.resolve(__dirname, '..', publicPath),
+      },
+      extensions: ['.js'],
+    },
+    optimization: {
+      minimize: !options.dev,
+      minimizer: [
+        new TerserPlugin({
+          terserOptions: {
+            compress: {
+              warnings: false,
+              drop_console: true,
+              drop_debugger: true,
+            },
+            output: {
+              comments: false,
+            },
+          },
+        }),
+      ],
+      splitChunks: {
+        cacheGroups: {
+          defaultVendors: {
+            name: 'vendor',
+            test: /[\\/]node_modules[\\/]/,
+            priority: -10,
+            chunks: 'all',
+          },
+          default: {
+            test: /[\\/]src[\\/]/,
+            name: 'pano',
+            priority: -20,
+          },
+        },
+      },
+    },
+  }
+}
+
+module.exports = createWebpackConfig