@wonder-partners/ar-button - npm Package Compare versions

Comparing version 0.5.2 to 1.0.0

CHANGELOG.md

@@ -8,2 +8,9 @@ # Changelog
 
+## [1.0.0] 2023-01-26
+
+### Added
+
+- Public API to defer an `ar-button` initialization. 
+- Minimized `main.js`.
+
 ## [0.5.2] 2022-10-03
@@ -10,0 +17,0 @@

package.json

 {
   "name": "@wonder-partners/ar-button",
-  "version": "0.5.2",
+  "version": "1.0.0",
   "description": "A web component to easily display 3D models in native AR across browsers and mobile devices",
-  "main": "index.js",
+  "main": "main.js",
   "author": "Wonder Partners (https://wonder-partners.com)",
@@ -20,3 +20,9 @@ "license": "GPL-3.0",
     "url": "https://github.com/Wonder-Partners/ar-button"
+  },
+  "scripts": {
+    "min": "terser main.js -o main.min.js -c --module -m",
+    "dev": "five-server",
+    "publish": "npm run min && npm publish",
+    "pack": "npm run min && npm pack"
   }
 }

README.md

@@ -9,12 +9,6 @@ # AR Button
 <!-- Import the component -->
-<script
-  type="module"
-  src="https://unpkg.com/@wonder-partners/ar-button"
-></script>
+<script src="https://unpkg.com/@wonder-partners/ar-button@1.0.0/main.min.js" type="module"></script>
 
 <!-- Default stylesheet (optional) -->
-<link
-  rel="stylesheet"
-  href="https://unpkg.com/@wonder-partners/ar-button/styles.css"
-/>
+<link rel="stylesheet" href="https://unpkg.com/@wonder-partners/ar-button@1.0.0/styles.css" />
 
@@ -29,48 +23,129 @@ <!-- Use it like any other HTML element -->
 
-**`src` → _uri_ (Android)**
+### Android
 
+#### `src`
+
 The URL to the 3D model for Android platform. Only glTF/GLB models are supported.
 
-**`title` → _string_ (Android)**
+#### `title`
 
 A name for the model. If present, it will be displayed in the UI. The name will be truncated with ellipses after 60 characters.
 
-**`fallback-url` → _uri_ (Android)**
+#### `fallback-url`
 
-When the [Google app](https://play.google.com/store/apps/details?id=com.google.android.googlequicksearchbox) is not present on the device, this is the URL that the browser navigates to.
+When the [Google app](https://play.google.com/store/apps/details?id=com.google.android.googlequicksearchbox) is not present on the device, or the device is not compatible with AR Core this is the URL that the browser will navigate to.
 
-**`occlusion` → _boolean_ (Android)**
+#### `occlusion`
 
-If present, turns on Object blending mode.
+If present, turns object blending feature on. If omitted, set object blending feature to off.
 
-**`link` → _uri_ (Android, iOS)**
+#### `link`
 
 A URL for an external webpage. If present, a button will be surfaced in the UI that intents to this URL when clicked.
 
-**`ios-src` → _uri_ (iOS)**
+### iOS
 
+#### `ios-src`
+
 The URL to the 3D model for iOS platform. Only USDZ models are supported.
 
-**`checkout-title` → _string_ (iOS)**
+#### `checkout-title`
 
-A name for the model. If present, it will be displayed in the UI. Only works if supplied alongside `checkout-subtitle`, `price`, and `call-to-action`.
+A name for the model. If present, it will be displayed in the UI. Only works if supplied alongside *checkout-subtitle*, *price*, and *call-to-action* attributes.
 
-**`checkout-subtitle` → _string_ (iOS)**
+#### `checkout-subtitle`
 
-If present, it will be displayed in the UI. Only works if supplied alongside `checkout-subtitle`, `price`, and `call-to-action`.
+If present, it will be displayed in the UI. Only works if supplied alongside *checkout-subtitle*, *price*, and *call-to-action*.
 
-**`price` → _string_ (iOS)**
+#### `price`
 
-If present, it will be displayed in the UI. Only works if supplied alongside `checkout-subtitle`, `price`, and `call-to-action`. AR Quick Look displays the subtitle and price separated by a comma below the title. Price should include the currency symbol.
+If present, it will be displayed in the UI. Only works if supplied alongside *checkout-subtitle*, *price*, and *call-to-action*. AR Quick Look displays the subtitle and price separated by a comma below the title. Price should include the currency symbol.
 
-**`call-to-action` → _string_ (iOS)**
+#### `call-to-action`
 
-If present, display this text as a button the quick look default UI. Only works when supplied alongside `checkout-title`, `checkout-subtitle` and `price`. You should also supply an url to `link` (see above).
+If present, display this text as a button the quick look default UI. Only works when supplied alongside *checkout-title*, *checkout-subtitle* and *price*. You should also supply an URL to *link* (see above).
 
-**`canonical-web-page-url` → _uri_ (iOS)**
+#### `ios-link`
 
+A URL for an external webpage. If left empty, the button will navigate to the previous page.
+
+#### `canonical-web-page-url`
+
 If present, this URL will be used inside the native _Share_ button of AR QuickLook.
 
-**`allows-content-scaling` → _int_ (iOS)**
+#### `allows-content-scaling`
 
 If set to 0, disables the pinch scaling feature. If omitted, default to 1 (pinch scaling feature enabled).
+
+## Deferred initialization
+
+You can initialize any `ar-button` programmatically with JavaScript.
+
+- Add the `deferred` attribute to your `ar-button` component:
+
+```html
+<ar-button id="my-ar-button" deferred>View in your space</ar-button>
+```
+
+- Import the module and use the `init()` function:
+
+```javascript
+import { init } from 'https://unpkg.com/@wonder-partners/ar-button@1.0.0/main.min.js';
+
+const arButton = document.getElementById('my-ar-button');
+
+init({
+  element: arButton,
+  iosConf: {
+    src: 'https://github.com/leoncvlt/ar-button/raw/master/assets/Astronaut.usdz',
+    checkoutTitle: 'My Product',
+    checkoutSubtitle: 'This is my product description',
+    callToAction: 'Buy',
+    canonicalWebPageURL: 'https://google.com',
+    allowsContentScaling: false,
+    price: '$100',
+    link: 'https://google.com',
+  },
+  androidConf: {
+    src: 'https://github.com/leoncvlt/ar-button/raw/master/assets/Astronaut.glb',
+    title: 'My Product',
+    link: 'https://google.com',
+    fallbackURL: 'https://google.com',
+    occlusion: false,
+  },
+});
+
+```
+
+### Configuration object
+
+When initializing an `ar-button` programmatically, you need to pass a configuration object to the `init()` function:
+
+```javascript
+{
+  element: Element,
+  iosConf?: {
+    src: string,
+    checkoutTitle?: string | undefined,
+    checkoutSubtitle?: string | undefined,
+    callToAction?: string | undefined,
+    canonicalWebPageURL?: string | undefined,
+    allowsContentScaling?: boolean | undefined,
+    price?: string | undefined,
+    link?: string | undefined,
+  } | undefined,
+  androidConf?: {
+    src: string,
+    title?: string | undefined,
+    link?: string | undefined,
+    fallbackURL?: string | undefined,
+    occlusion?: boolean | undefined,
+  } | undefined,
+}
+```
+
+### FAQ
+
+**Q:** *Why can't I see my custom action in AR Quick Look?*
+
+**R:** Make sure that at least the `checkout-title`, `checkout-subtitle` and `call-to-action` (can be an non-breaking space) attributes are correctly filled.

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

92798

increased by12.98%

Number of package files

8

increased by14.29%

Lines of code

236

increased by69.78%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

150

increased by100%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes