Merge pull request #778 from nickschot/v2-addon

Convert to v2 addon

.github/workflows/ci.yml

@@ -33,7 +33,7 @@ jobs:
         run: pnpm install --frozen-lockfile
       - name: Lint Addon
         run: pnpm run lint
-        working-directory: addon
+        working-directory: ember-mobile-menu
       - name: Lint Test App
         run: pnpm run lint
         working-directory: test-app

docs/app/styles/app.scss

@@ -1,5 +1,5 @@
-@import "ember-mobile-menu";
-@import "ember-mobile-menu/themes/android";
+//@import "ember-mobile-menu";
+//@import "ember-mobile-menu/themes/android";
 
 .demo-height {
   height: 500px;

docs/ember-cli-build.js

@@ -5,7 +5,7 @@ const EmberApp = require('ember-cli/lib/broccoli/ember-app');
 module.exports = function (defaults) {
   let app = new EmberApp(defaults, {
     'ember-cli-addon-docs': {
-      documentingAddonAt: '../addon',
+      documentingAddonAt: '../ember-mobile-menu',
     },
   });
 

docs/package.json

@@ -9,7 +9,7 @@
     "url": "https://github.com/nickschot/ember-mobile-menu"
   },
   "license": "MIT",
-  "author": "Nick Schot <nickschot@webhub.nl>",
+  "author": "Nick Schot <nick@sophorasoft.nl>",
   "directories": {
     "doc": "doc",
     "test": "tests"
@@ -53,7 +53,7 @@
     "ember-data": "5.3.0",
     "ember-disable-prototype-extensions": "1.1.3",
     "ember-load-initializers": "2.1.2",
-    "ember-mobile-menu": "4.0.0",
+    "ember-mobile-menu": "workspace:*",
     "ember-page-title": "8.1.0",
     "ember-qunit": "8.0.2",
     "ember-resize-observer-polyfill": "0.0.1",

ember-mobile-menu/.eslintignore

@@ -0,0 +1,9 @@
+# unconventional js
+/blueprints/*/files/
+
+# compiled output
+/dist/
+/declarations/
+
+# misc
+/coverage/

ember-mobile-menu/.eslintrc.cjs

@@ -0,0 +1,43 @@
+'use strict';
+
+module.exports = {
+  root: true,
+  parser: '@babel/eslint-parser',
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    babelOptions: {
+      root: __dirname,
+    },
+  },
+  plugins: ['ember'],
+  extends: [
+    'eslint:recommended',
+    'plugin:ember/recommended',
+    'plugin:prettier/recommended',
+  ],
+  env: {
+    browser: true,
+  },
+  rules: {},
+  overrides: [
+    // node files
+    {
+      files: [
+        './.eslintrc.cjs',
+        './.prettierrc.cjs',
+        './.template-lintrc.cjs',
+        './addon-main.cjs',
+      ],
+      parserOptions: {
+        sourceType: 'script',
+      },
+      env: {
+        browser: false,
+        node: true,
+      },
+      plugins: ['n'],
+      extends: ['plugin:n/recommended'],
+    },
+  ],
+};

ember-mobile-menu/.gitignore

@@ -0,0 +1,12 @@
+# The authoritative copies of these live in the monorepo root (because they're
+# more useful on github that way), but the build copies them into here so they
+# will also appear in published NPM packages.
+/README.md
+/LICENSE.md
+
+# compiled output
+/dist
+/declarations
+
+# npm/pnpm/yarn pack output
+*.tgz

ember-mobile-menu/.prettierignore

@@ -0,0 +1,9 @@
+# unconventional js
+/blueprints/*/files/
+
+# compiled output
+/dist/
+/declarations/
+
+# misc
+/coverage/

ember-mobile-menu/.prettierrc.cjs

@@ -0,0 +1,6 @@
+'use strict';
+
+module.exports = {
+  plugins: ['prettier-plugin-ember-template-tag'],
+  singleQuote: true,
+};

ember-mobile-menu/.template-lintrc.cjs

@@ -0,0 +1,5 @@
+'use strict';
+
+module.exports = {
+  extends: 'recommended',
+};

ember-mobile-menu/addon-main.cjs

@@ -0,0 +1,4 @@
+'use strict';
+
+const { addonV1Shim } = require('@embroider/addon-shim');
+module.exports = addonV1Shim(__dirname);

ember-mobile-menu/babel.config.json

@@ -0,0 +1,12 @@
+{
+  "plugins": [
+    "@embroider/addon-dev/template-colocation-plugin",
+    "@babel/plugin-transform-class-static-block",
+    ["babel-plugin-ember-template-compilation", {
+      "targetFormat": "hbs",
+      "transforms": []
+    }],
+    ["@babel/plugin-proposal-decorators", { "version": "legacy" }],
+    "@babel/plugin-proposal-class-properties"
+  ]
+}

ember-mobile-menu/package.json

@@ -0,0 +1,99 @@
+{
+  "name": "ember-mobile-menu",
+  "version": "4.0.0",
+  "description": "A draggable sidebar menu for Ember.",
+  "keywords": [
+    "ember-addon",
+    "mobile",
+    "menu",
+    "sidebar",
+    "hamburger-menu"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/nickschot/ember-mobile-menu"
+  },
+  "license": "MIT",
+  "author": "Nick Schot <[email protected]>",
+  "homepage": "https://nickschot.github.io/ember-mobile-menu",
+  "exports": {
+    ".": "./dist/index.js",
+    "./*": "./dist/*.js",
+    "./addon-main.js": "./addon-main.cjs"
+  },
+  "files": [
+    "addon-main.cjs",
+    "declarations",
+    "dist"
+  ],
+  "scripts": {
+    "build": "rollup --config",
+    "lint": "concurrently 'npm:lint:*(!fix)' --names 'lint:'",
+    "lint:fix": "concurrently 'npm:lint:*:fix' --names 'fix:'",
+    "lint:hbs": "ember-template-lint . --no-error-on-unmatched-pattern",
+    "lint:hbs:fix": "ember-template-lint . --fix --no-error-on-unmatched-pattern",
+    "lint:js": "eslint . --cache",
+    "lint:js:fix": "eslint . --fix",
+    "prepack": "rollup --config",
+    "start": "rollup --config --watch",
+    "test": "echo 'A v2 addon does not have tests, run tests in test-app'"
+  },
+  "dependencies": {
+    "@embroider/addon-shim": "^1.0.0",
+    "@ember/legacy-built-in-components": "^0.5.0",
+    "@ember/render-modifiers": "^2.0.0",
+    "@ember/test-waiters": "^3.0.0",
+    "@glimmer/component": "^1.0.4",
+    "@glimmer/tracking": "^1.0.4",
+    "body-scroll-lock": "^3.0.1",
+    "ember-concurrency": "^3.0.0",
+    "ember-could-get-used-to-this": "^1.0.0",
+    "ember-gesture-modifiers": "^5.0.0",
+    "ember-on-resize-modifier": "^2.0.0",
+    "ember-set-body-class": "^1.0.1",
+    "tracked-built-ins": "^3.0.0",
+    "wobble": "^1.5.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.17.0",
+    "@babel/eslint-parser": "^7.19.1",
+    "@babel/plugin-proposal-class-properties": "^7.16.7",
+    "@babel/plugin-proposal-decorators": "^7.20.13",
+    "@babel/plugin-transform-class-static-block": "^7.20.0",
+    "@babel/runtime": "^7.17.0",
+    "@embroider/addon-dev": "^4.1.0",
+    "@rollup/plugin-babel": "^6.0.3",
+    "babel-plugin-ember-template-compilation": "^2.2.0",
+    "concurrently": "^8.0.1",
+    "ember-template-lint": "^5.11.2",
+    "eslint": "^8.33.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-ember": "^11.11.1",
+    "eslint-plugin-n": "^16.0.0",
+    "eslint-plugin-prettier": "^5.0.0",
+    "prettier": "^3.0.3",
+    "prettier-plugin-ember-template-tag": "^1.1.0",
+    "rollup": "^3.21.8",
+    "rollup-plugin-copy": "^3.4.0"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org"
+  },
+  "ember": {
+    "edition": "octane"
+  },
+  "ember-addon": {
+    "version": 2,
+    "type": "addon",
+    "main": "addon-main.cjs",
+    "app-js": {
+      "./components/mobile-menu-toggle.js": "./dist/_app_/components/mobile-menu-toggle.js",
+      "./components/mobile-menu-wrapper.js": "./dist/_app_/components/mobile-menu-wrapper.js",
+      "./components/mobile-menu-wrapper/content.js": "./dist/_app_/components/mobile-menu-wrapper/content.js",
+      "./components/mobile-menu.js": "./dist/_app_/components/mobile-menu.js",
+      "./components/mobile-menu/link-to.js": "./dist/_app_/components/mobile-menu/link-to.js",
+      "./components/mobile-menu/mask.js": "./dist/_app_/components/mobile-menu/mask.js",
+      "./components/mobile-menu/tray.js": "./dist/_app_/components/mobile-menu/tray.js"
+    }
+  }
+}

ember-mobile-menu/rollup.config.mjs

@@ -0,0 +1,72 @@
+import { babel } from '@rollup/plugin-babel';
+import copy from 'rollup-plugin-copy';
+import { Addon } from '@embroider/addon-dev/rollup';
+
+const addon = new Addon({
+  srcDir: 'src',
+  destDir: 'dist',
+});
+
+export default {
+  // This provides defaults that work well alongside `publicEntrypoints` below.
+  // You can augment this if you need to.
+  output: addon.output(),
+
+  plugins: [
+    // These are the modules that users should be able to import from your
+    // addon. Anything not listed here may get optimized away.
+    // By default all your JavaScript modules (**/*.js) will be importable.
+    // But you are encouraged to tweak this to only cover the modules that make
+    // up your addon's public API. Also make sure your package.json#exports
+    // is aligned to the config here.
+    // See https://github.com/embroider-build/embroider/blob/main/docs/v2-faq.md#how-can-i-define-the-public-exports-of-my-addon
+    addon.publicEntrypoints(['**/*.js', 'index.js']),
+
+    // These are the modules that should get reexported into the traditional
+    // "app" tree. Things in here should also be in publicEntrypoints above, but
+    // not everything in publicEntrypoints necessarily needs to go here.
+    addon.appReexports([
+      'components/**/*.js',
+      'helpers/**/*.js',
+      'modifiers/**/*.js',
+      'services/**/*.js',
+    ]),
+
+    // Follow the V2 Addon rules about dependencies. Your code can import from
+    // `dependencies` and `peerDependencies` as well as standard Ember-provided
+    // package names.
+    addon.dependencies(),
+
+    // This babel config should *not* apply presets or compile away ES modules.
+    // It exists only to provide development niceties for you, like automatic
+    // template colocation.
+    //
+    // By default, this will load the actual babel config from the file
+    // babel.config.json.
+    babel({
+      extensions: ['.js', '.gjs'],
+      babelHelpers: 'bundled',
+    }),
+
+    // Ensure that standalone .hbs files are properly integrated as Javascript.
+    addon.hbs(),
+
+    // Ensure that .gjs files are properly integrated as Javascript
+    addon.gjs(),
+
+    // addons are allowed to contain imports of .css files, which we want rollup
+    // to leave alone and keep in the published output.
+    addon.keepAssets(['**/*.css']),
+
+    // Remove leftover build artifacts when starting a new build.
+    addon.clean(),
+
+    // Copy Readme and License into published package
+    /*copy({
+      targets: [
+        { src: '../README.md', dest: '.' },
+        { src: '../LICENSE.md', dest: '.' },
+      ],
+    }),*/
+  ],
+};

ember-mobile-menu/src/components/mobile-menu-toggle.hbs

@@ -0,0 +1,8 @@
+<button
+  class="mobile-menu__toggle"
+  type="button"
+  {{on "click" this.onClick}}
+  ...attributes
+>
+  {{yield}}
+</button>

ember-mobile-menu/src/components/mobile-menu-toggle.js

@@ -0,0 +1,28 @@
+import Component from '@glimmer/component';
+
+const _fn = () => {};
+
+/**
+ * A toggle component to open or close a menu.
+ *
+ * @class MobileMenuToggle
+ * @public
+ */
+export default class MobileMenuToggle extends Component {
+  /**
+   * Target menu for the toggle
+   *
+   * @argument target
+   * @type String 'left' or 'right'
+   */
+
+  /**
+   * Hook fired when the toggle is clicked. You can pass in an action.
+   *
+   * @argument onClick
+   * @type function
+   */
+  get onClick() {
+    return () => this.args.onClick(this.args.target) ?? _fn;
+  }
+}