canvas-globe 1.0.2 → 1.1.1

package/CHANGELOG.md

@@ -6,6 +6,21 @@ All notable changes to this package are documented here. The format follows
 
 ## [Unreleased]
 
+## [1.1.1] - 2026-09-17
+
+- Prevented the production licensing presentation from covering live globes on
+  the official CanvasGlobe website and its Cloudflare preview deployments.
+- Kept the licensing presentation unchanged for customer production domains.
+
+## [1.1.0] - 2026-09-17
+
+- Added official Vue, Angular, Svelte, and Web Component packages that keep
+  framework lifecycle code separate while sharing the CanvasGlobe renderer.
+- Added `3d-globe-map` as an official discovery package that re-exports the
+  canonical `canvas-globe` implementation without duplicating source code.
+- Extended companion-package release checks and publishing automation so all
+  official package entry points stay version-aligned.
+
 ## [1.0.2] - 2026-09-17
 
 - Added a prominent commercial-license notice near the top of the npm README,

package/README.md

@@ -41,7 +41,7 @@
 
 `canvas-globe` is a zero-dependency JavaScript library for an interactive
 **3D globe** and **flat world map** on Canvas 2D. It works with
-vanilla JavaScript, React, or a Web Component and requires no WebGL, map API
+vanilla JavaScript, React, Vue, Angular, Svelte, or a Web Component and requires no WebGL, map API
 key, tile service, or runtime network request.
 
 - **Zero dependencies:** no WebGL, D3, map tiles, or API keys
@@ -60,7 +60,7 @@ key, tile service, or runtime network request.
 - **Day and night:** calculate the solar terminator for a given time
 - **Four projections:** orthographic, equirectangular, Mercator, and Natural Earth
 - **Accessibility:** keyboard controls, a live region, and reduced-motion support
-- **Bindings:** vanilla JavaScript, a custom element, and React
+- **Bindings:** vanilla JavaScript, React, Vue, Angular, Svelte, and a custom element
 
 Common uses include audience dashboards, launch pages, status boards, and share graphics.
 
@@ -135,19 +135,19 @@ your existing application rather than installing a second React copy.
 For a plain `<script>` installation, use the versioned UMD build:
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/canvas-globe@1.0.2/dist/canvas-globe.umd.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/canvas-globe@1.1.1/dist/canvas-globe.umd.js"></script>
 ```
 
 The same npm release is also available from UNPKG:
 
 ```html
-<script src="https://unpkg.com/canvas-globe@1.0.2/dist/canvas-globe.umd.js"></script>
+<script src="https://unpkg.com/canvas-globe@1.1.1/dist/canvas-globe.umd.js"></script>
 ```
 
 Modern browsers can import the package through an ESM CDN:
 
 ```js
-import { createGlobe } from "https://esm.sh/canvas-globe@1.0.2";
+import { createGlobe } from "https://esm.sh/canvas-globe@1.1.1";
 ```
 
 Pin an exact version in production so a future release cannot change a deployed page unexpectedly.
@@ -167,7 +167,7 @@ import { createGlobe } from "canvas-globe";
 Or drop the UMD build on a page with no build step at all:
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/canvas-globe@1.0.2/dist/canvas-globe.umd.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/canvas-globe@1.1.1/dist/canvas-globe.umd.js"></script>
 <canvas id="globe" style="width:520px;aspect-ratio:1"></canvas>
 <script>
   CanvasGlobe.createGlobe(document.getElementById("globe"), {
@@ -250,6 +250,23 @@ For a dedicated React package name, install the thin companion entry point:
 npm install react-canvas-globe
 ```
 
+### Framework and discovery packages
+
+Every official package uses the same CanvasGlobe renderer and commercial
+license. Framework packages add native lifecycle and event integration, while
+`3d-globe-map` is an alternate discovery entry for the canonical API.
+
+| Package | Use it for |
+| --- | --- |
+| [`canvas-globe`](https://www.npmjs.com/package/canvas-globe) | Canonical JavaScript and Canvas 2D API |
+| [`react-canvas-globe`](https://www.npmjs.com/package/react-canvas-globe) | React component |
+| [`canvas-globe-vue`](https://www.npmjs.com/package/canvas-globe-vue) | Vue 3 component |
+| [`canvas-globe-angular`](https://www.npmjs.com/package/canvas-globe-angular) | Angular standalone component |
+| [`canvas-globe-svelte`](https://www.npmjs.com/package/canvas-globe-svelte) | Svelte and SvelteKit component |
+| [`canvas-globe-web-component`](https://www.npmjs.com/package/canvas-globe-web-component) | Framework-independent custom element |
+| [`3d-globe-map`](https://www.npmjs.com/package/3d-globe-map) | Search-friendly alternate package entry |
+| [`create-canvas-globe`](https://www.npmjs.com/package/create-canvas-globe) | Project scaffolder and starter templates |
+
 To scaffold a complete starter for React, Next.js, Vue, SvelteKit, Vanilla
 JavaScript, or Web Components, run:
 

package/codemeta.json

@@ -5,7 +5,7 @@
   "identifier": "canvas-globe",
   "description": "CanvasGlobe helps developers add interactive 3D globes and flat world maps to JavaScript and React apps with Canvas 2D, without WebGL, map tiles, API keys, or runtime network calls.",
   "url": "https://canvasglobe.swiftools.com/",
-  "version": "1.0.2",
+  "version": "1.1.1",
   "codeRepository": "https://github.com/Shree-hari/canvas-globe",
   "issueTracker": "https://github.com/Shree-hari/canvas-globe/issues",
   "downloadUrl": "https://www.npmjs.com/package/canvas-globe",

package/dist/canvas-globe.umd.js

@@ -1314,7 +1314,7 @@ function drawFitted(ctx, media, box) {
 }
 
 // Keep in sync with package.json. Release checks enforce this value.
-const CANVAS_GLOBE_VERSION = "1.0.2";
+const CANVAS_GLOBE_VERSION = "1.1.1";
 
 /** Local license-key checks and production-use presentation helpers. */
 
@@ -1342,9 +1342,18 @@ const PRIVATE_HOST_PATTERNS = [
   /^::1$/,
 ];
 
+const OFFICIAL_SITE_HOSTS = new Set([
+  "canvasglobe.swiftools.com",
+  "canvas-globe-website.pages.dev",
+]);
+const OFFICIAL_PREVIEW_SUFFIX = ".canvas-globe-website.pages.dev";
+
 const normalizeLicenseKey = (value) =>
   typeof value === "string" ? value.trim() : "";
 
+const isOfficialSiteHost = (hostname) =>
+  OFFICIAL_SITE_HOSTS.has(hostname) || hostname.endsWith(OFFICIAL_PREVIEW_SUFFIX);
+
 /** Returns development, production or unknown for a browser location. */
 function inspectRuntime(locationValue = globalThis.location) {
   if (!locationValue) return { kind: "unknown", hostname: "", public: false };
@@ -1391,7 +1400,7 @@ function getLicensePresentation(
 ) {
   const status = inspectLicenseKey(value, mode);
   const runtime = inspectRuntime(locationValue);
-  if (!mode || status.valid || !runtime.public) {
+  if (!mode || status.valid || !runtime.public || isOfficialSiteHost(runtime.hostname)) {
     return { status, runtime, notice: null };
   }
   return {
@@ -1411,6 +1420,7 @@ function reportLicenseStatus(value, mode = COMMERCIAL_LICENSE_MODE) {
   const presentation = getLicensePresentation(value, globalThis.location, mode);
   const { status } = presentation;
   if (typeof location === "undefined") return status;
+  if (!presentation.notice) return status;
   if (status.kind === "missing") {
     console.error(
       mode

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "canvas-globe",
-  "version": "1.0.2",
-  "description": "Build interactive 3D globes and flat world maps in JavaScript or React with Canvas 2D, without WebGL, map tiles, API keys, or runtime network calls.",
+  "version": "1.1.1",
+  "description": "Build interactive 3D globes and flat world maps in JavaScript, React, Vue, Angular, or Svelte with Canvas 2D and no WebGL.",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": {
     "name": "Harsh Jhunjhunuwala"
@@ -24,6 +24,11 @@
     "map",
     "world-map",
     "react-globe",
+    "vue-globe",
+    "angular-globe",
+    "svelte-globe",
+    "web-component-globe",
+    "3d-globe-map",
     "react",
     "globe-visualization",
     "data-visualization",
@@ -97,7 +102,8 @@
     "build:registry": "shadcn build --output .registry-build",
     "capture:readme": "node scripts/capture-readme-demo.mjs",
     "test": "node --test",
-    "test:ecosystem": "npm run build:registry && node scripts/validate-ecosystem.mjs && npm --prefix packages/create-canvas-globe test",
+    "build:companions": "npm --prefix packages/canvas-globe-angular run build",
+    "test:ecosystem": "npm run build:companions && npm run build:registry && node scripts/validate-ecosystem.mjs && npm --prefix packages/create-canvas-globe test",
     "typecheck": "tsc --noEmit -p tsconfig.json",
     "typecheck:ecosystem": "tsc --noEmit -p tsconfig.ecosystem.json",
     "smoke:package": "node scripts/package-smoke.mjs",
@@ -115,18 +121,26 @@
     }
   },
   "devDependencies": {
+    "@angular/compiler": "^21.2.23",
+    "@angular/compiler-cli": "^21.2.23",
+    "@angular/core": "^21.2.23",
     "@storybook/addon-a11y": "^10.6.0",
     "@storybook/html-vite": "^10.6.0",
+    "@sveltejs/package": "^2.5.8",
     "@types/react": "^19.3.0",
     "chromatic": "^18.8.1",
     "gifenc": "^1.0.3",
     "playwright-core": "^1.63.0",
     "pngjs": "^7.0.0",
     "polygon-clipping": "^0.15.7",
+    "rxjs": "^7.8.2",
     "shadcn": "^4.21.0",
     "storybook": "^10.6.0",
+    "svelte": "^5.57.0",
     "topojson-client": "^3.1.0",
-    "typescript": "^5.5.0"
+    "typescript": "^5.5.0",
+    "vue": "^3.5.43",
+    "zone.js": "^0.16.0"
   },
   "engines": {
     "node": ">=18"

package/src/license.js

@@ -24,9 +24,18 @@ const PRIVATE_HOST_PATTERNS = [
   /^::1$/,
 ];
 
+const OFFICIAL_SITE_HOSTS = new Set([
+  "canvasglobe.swiftools.com",
+  "canvas-globe-website.pages.dev",
+]);
+const OFFICIAL_PREVIEW_SUFFIX = ".canvas-globe-website.pages.dev";
+
 const normalizeLicenseKey = (value) =>
   typeof value === "string" ? value.trim() : "";
 
+const isOfficialSiteHost = (hostname) =>
+  OFFICIAL_SITE_HOSTS.has(hostname) || hostname.endsWith(OFFICIAL_PREVIEW_SUFFIX);
+
 /** Returns development, production or unknown for a browser location. */
 export function inspectRuntime(locationValue = globalThis.location) {
   if (!locationValue) return { kind: "unknown", hostname: "", public: false };
@@ -73,7 +82,7 @@ export function getLicensePresentation(
 ) {
   const status = inspectLicenseKey(value, mode);
   const runtime = inspectRuntime(locationValue);
-  if (!mode || status.valid || !runtime.public) {
+  if (!mode || status.valid || !runtime.public || isOfficialSiteHost(runtime.hostname)) {
     return { status, runtime, notice: null };
   }
   return {
@@ -93,6 +102,7 @@ export function reportLicenseStatus(value, mode = COMMERCIAL_LICENSE_MODE) {
   const presentation = getLicensePresentation(value, globalThis.location, mode);
   const { status } = presentation;
   if (typeof location === "undefined") return status;
+  if (!presentation.notice) return status;
   if (status.kind === "missing") {
     console.error(
       mode

package/src/version.js

@@ -1,2 +1,2 @@
 // Keep in sync with package.json. Release checks enforce this value.
-export const CANVAS_GLOBE_VERSION = "1.0.2";
+export const CANVAS_GLOBE_VERSION = "1.1.1";