@smplrspace/smplr-loader 2.4.1-beta.13 → 2.4.1-beta.2

package/.eslintignore

@@ -0,0 +1,3 @@
+node_modules
+dist
+src/generated/smplr.d.ts

package/.eslintrc.js

@@ -0,0 +1,42 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+    jest: true,
+    node: true,
+  },
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+  },
+  settings: {
+    'import/parsers': {
+      '@typescript-eslint/parser': ['.ts', '.tsx'],
+    },
+    'import/resolver': {
+      typescript: {},
+    },
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:prettier/recommended',
+    'plugin:import/recommended',
+    'plugin:import/typescript',
+  ],
+  plugins: ['@typescript-eslint', 'simple-import-sort'],
+  rules: {
+    'prettier/prettier': [
+      'error',
+      {
+        singleQuote: true,
+        semi: false,
+        printWidth: 120,
+      },
+    ],
+    'import/newline-after-import': 'error',
+    'simple-import-sort/imports': 'error',
+    'simple-import-sort/exports': 'error',
+  },
+}

package/package.json

@@ -1,22 +1,9 @@
 {
   "name": "@smplrspace/smplr-loader",
-  "version": "2.4.1-beta.13",
+  "version": "2.4.1-beta.2",
   "description": "NPM package to load a typed Smplr.js from CDN easily",
-  "type": "module",
-  "files": [
-    "dist"
-  ],
-  "main": "./dist/index.umd.cjs",
-  "module": "./dist/index.js",
-  "exports": {
-    ".": {
-      "import": "./dist/index.js",
-      "require": "./dist/index.umd.cjs"
-    }
-  },
-  "types": "./dist/index.d.ts",
+  "main": "src/index.ts",
   "scripts": {
-    "build": "yarn tsc && vite build",
     "dev": "echo 'No dev'",
     "serve": "echo 'No serve'",
     "libtest": "echo 'No libtest'",
@@ -41,9 +28,7 @@
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-prettier": "^4.2.1",
     "prettier": "^2.7.1",
-    "typescript": "4.7.4",
-    "vite": "^4.1.1",
-    "vite-plugin-dts": "^1.7.1"
+    "typescript": "4.7.4"
   },
   "homepage": "https://www.smplrspace.com",
   "keywords": [

package/src/index.ts

@@ -0,0 +1,55 @@
+import { loadEsmModule, loadUmdScript } from './loadScript'
+import { loadStylesheet } from './loadStylesheet'
+import { Smplr } from './types'
+
+export type { Smplr } from './types'
+
+const SMPLR = {
+  umd: {
+    prod: 'https://app.smplrspace.com/lib/smplr.js',
+    dev: 'https://dev.smplrspace.com/lib/smplr.js',
+    local: 'http://localhost:3000/lib/smplr.umd.js',
+  },
+  esm: {
+    prod: 'https://app.smplrspace.com/lib/smplr.mjs',
+    dev: 'https://dev.smplrspace.com/lib/smplr.mjs',
+    local: 'http://localhost:3000/lib/smplr.mjs',
+  },
+  css: {
+    prod: 'https://app.smplrspace.com/lib/smplr.css',
+    dev: 'https://dev.smplrspace.com/lib/smplr.css',
+    local: 'http://localhost:3000/lib/style.css',
+  },
+}
+
+type BundleType = 'esm' | 'umd'
+type Env = 'prod' | 'dev' | 'local'
+
+export async function loadSmplrJs(bundle: BundleType = 'esm', env: Env = 'prod'): Promise<Smplr> {
+  try {
+    // we don't wait for the stylesheet, just start to load it
+    loadStylesheet(SMPLR.css[env])
+  } catch (e) {
+    console.warn('oops')
+    // ignore errors, they will be printed anyway
+  }
+  // load script
+  try {
+    if (bundle === 'esm') {
+      const smplr = (await loadEsmModule(SMPLR.esm[env])) as Smplr
+      console.log('loaded esm', smplr)
+      return smplr
+    } else {
+      await loadUmdScript(SMPLR.umd[env])
+      const smplr = window.smplr as Smplr
+      if (!smplr) {
+        throw new Error('Failed to load smplr.js')
+      }
+      console.log('loaded umd', smplr)
+      return smplr
+    }
+  } catch (error) {
+    console.error(error)
+    throw new Error('Failed to load smplr.js')
+  }
+}

package/src/loadScript.ts

@@ -0,0 +1,21 @@
+export const loadUmdScript = (url: string) => {
+  return new Promise((resolve, reject) => {
+    try {
+      const scriptElement = document.createElement('script')
+      scriptElement.type = 'text/javascript'
+      scriptElement.async = true
+      scriptElement.src = url
+      scriptElement.addEventListener('load', () => {
+        resolve('ok')
+      })
+      scriptElement.addEventListener('error', () => {
+        reject(`Failed to load the script from ${url}`)
+      })
+      document.body.appendChild(scriptElement)
+    } catch (error) {
+      reject(error)
+    }
+  })
+}
+
+export const loadEsmModule = (url: string) => import(url /* @vite-ignore */)

package/src/loadStylesheet.ts

@@ -0,0 +1,22 @@
+export const loadStylesheet = (url: string) => {
+  return new Promise((resolve, reject) => {
+    try {
+      const linkElement = document.createElement('link')
+      linkElement.type = 'text/css'
+      linkElement.href = url
+      linkElement.rel = 'stylesheet'
+      linkElement.addEventListener('load', () => {
+        resolve('ok')
+      })
+      linkElement.addEventListener('error', () => {
+        const error = new Error(`Failed to load the stylesheet from ${url}`)
+        console.error(error)
+        reject(error)
+      })
+      document.head.appendChild(linkElement)
+    } catch (error) {
+      console.error(error)
+      reject(error)
+    }
+  })
+}

package/{dist → src}/types.d.ts

@@ -6,7 +6,6 @@ export {}
 export interface Smplr {
   version: typeof smplr.version
   Space: typeof smplr.Space
-  QueryClient: typeof smplr.QueryClient
 }
 
 declare global {

package/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true
+  },
+  "include": ["src"]
+}

package/dist/generated/smplr.d.ts

@@ -1,342 +0,0 @@
-declare interface BaseDataLayer<T, D extends UnknownData> {
-    tooltip?: (dataElement: T & D) => string;
-    onClick?: (dataElement: T & D) => void;
-    onHover?: (dataElement: T & D) => void;
-    onHoverOut?: (dataElement: T & D) => void;
-}
-
-declare type CameraMode = '2d' | '3d'
-
-declare interface ClientOptions {
-    organizationId: string;
-    clientToken: string;
-}
-
-declare type DataLayer<D extends UnknownData = NoData> = PointDataLayer<D> | IconDataLayer<D> | PolygonDataLayer<D> | PolylineDataLayer<D> | FurnitureDataLayer<D>;
-
-declare interface DeprecatedPreviewProps {
-    mode: CameraMode;
-    onViewerReady: () => void;
-    onError: () => void;
-}
-
-declare interface Filter {
-    background: {
-        clearColor: string;
-    };
-    directionalLight: {
-        distance: number;
-        intensity: number;
-    };
-    hemisphericLight: {
-        diffuseColor: string;
-        specularColor: string;
-        groundColor: string;
-        intensity: number;
-    };
-    whiteMaterial: {
-        baseColor: string;
-        metallicRatio: number;
-        roughnessRatio: number;
-        alphaRatio: number;
-    };
-    indoorMaterial: {
-        baseColor: string;
-        metallicRatio: number;
-        roughnessRatio: number;
-        alphaRatio: number;
-    };
-    grassMaterial: {
-        baseColor: string;
-        metallicRatio: number;
-        roughnessRatio: number;
-        alphaRatio: number;
-    };
-    waterMaterial: {
-        baseColor: string;
-        metallicRatio: number;
-        roughnessRatio: number;
-        alphaRatio: number;
-    };
-    darkGreyMaterial: {
-        baseColor: string;
-        metallicRatio: number;
-        roughnessRatio: number;
-        alphaRatio: number;
-    };
-    glassMaterial: {
-        baseColor: string;
-        metallicRatio: number;
-        roughnessRatio: number;
-        alphaRatio: number;
-    };
-    metalMaterial: {
-        baseColor: string;
-        metallicRatio: number;
-        roughnessRatio: number;
-        alphaRatio: number;
-    };
-    compassMaterial: {
-        baseColor: string;
-        metallicRatio: number;
-        roughnessRatio: number;
-        alphaRatio: number;
-    };
-    placeholderMaterial: {
-        baseColor: string;
-        metallicRatio: number;
-        roughnessRatio: number;
-        alphaRatio: number;
-    };
-    hoveredMaterial: {
-        baseColor: string;
-        metallicRatio: number;
-        roughnessRatio: number;
-        alphaRatio: number;
-    };
-    selectedMaterial: {
-        baseColor: string;
-        metallicRatio: number;
-        roughnessRatio: number;
-        alphaRatio: number;
-    };
-    dataElement: {
-        defaultColor: string;
-    };
-}
-
-declare type FurnitureData = {
-    furnitureId: string | string[];
-};
-
-declare interface FurnitureDataLayer<D extends UnknownData = NoData> extends BaseDataLayer<FurnitureData, D> {
-    id: string;
-    type: 'furniture';
-    data: (FurnitureData & D)[];
-    color?: string | ((dataElement: FurnitureData & D) => string);
-}
-
-declare type IconData = {
-    position: SmplrCoord3d;
-};
-
-declare interface IconDataLayer<D extends UnknownData = NoData> extends BaseDataLayer<IconData, D> {
-    id: string;
-    type: 'icon';
-    data: (IconData & D)[];
-    icon: {
-        url: string;
-        width: number;
-        height: number;
-    };
-    width?: number | ((dataElement: IconData & D) => number);
-    onDrag?: (dragged: {
-        data: IconData & D;
-    }) => void;
-    onDrop?: (dropped: {
-        data: IconData & D;
-        position: SmplrCoord3d;
-    }) => void;
-}
-
-declare type NoData = Record<string, never>;
-
-declare type OnPickFn = (args: { coordinates: SmplrCoord3d; furnitureId?: string }) => void
-
-declare interface OrbitCameraPlacement {
-    alpha: number;
-    beta: number;
-    radius: number;
-    target: Vector3Coord;
-}
-
-declare type PointData = {
-    position: SmplrCoord3d;
-};
-
-declare interface PointDataLayer<D extends UnknownData = NoData> extends BaseDataLayer<PointData, D> {
-    id: string;
-    type: 'point';
-    data: (PointData & D)[];
-    diameter?: number | ((dataElement: PointData & D) => number);
-    anchor?: 'bottom' | 'center' | 'top';
-    color?: string | ((dataElement: PointData & D) => string);
-    alpha?: number;
-    onDrag?: (dragged: {
-        data: PointData & D;
-    }) => void;
-    onDrop?: (dropped: {
-        data: PointData & D;
-        position: SmplrCoord3d;
-    }) => void;
-}
-
-declare type PolygonData = {
-    coordinates: SmplrCoord2d[];
-};
-
-declare interface PolygonDataLayer<D extends UnknownData = NoData> extends BaseDataLayer<PolygonData, D> {
-    id: string;
-    type: 'polygon';
-    data: (PolygonData & D)[];
-    baseHeight?: number | ((dataElement: PolygonData & D) => number);
-    height?: number | ((dataElement: PolygonData & D) => number);
-    color?: string | ((dataElement: PolygonData & D) => string);
-    alpha?: number;
-    onDrag?: (dragged: {
-        data: PolygonData & D;
-    }) => void;
-    onDrop?: (dropped: {
-        data: PolygonData & D;
-        coordinates: SmplrCoord2d[];
-    }) => void;
-    disableReshape?: boolean;
-    reshapeBoxColor?: string;
-}
-
-declare type PolylineData = {
-    coordinates: SmplrCoord3d[];
-};
-
-declare interface PolylineDataLayer<D extends UnknownData = NoData> extends BaseDataLayer<PolylineData, D> {
-    id: string;
-    type: 'polyline';
-    data: (PolylineData & D)[];
-    shape?: 'circle' | 'triangle' | 'square' | 'pentagon' | 'hexagon' | [number, number][];
-    cap?: boolean;
-    scale?: number | ((scaled: {
-        data: PolylineData & D;
-        stepIndex: number;
-        distance: number;
-    }) => number);
-    stepSize?: number;
-    color?: string | ((dataElement: PolylineData & D) => string);
-    alpha?: number;
-    onDrag?: (dragged: {
-        data: PolylineData & D;
-    }) => void;
-    onDrop?: (dropped: {
-        data: PolylineData & D;
-        coordinates: SmplrCoord3d[];
-    }) => void;
-    disableReshape?: boolean;
-    reshapeBoxColor?: string;
-}
-
-export declare class QueryClient {
-    private options;
-    constructor(options: ClientOptions);
-    private checkOptions;
-    private fetchRaw;
-    private fetch;
-    checkApiConnection(): Promise<'OK'>;
-    getApiVersion(): Promise<string>;
-    getSpace(id: string): Promise<Space_2>;
-}
-
-declare interface RenderOptions {
-    compass?: boolean
-    annotations?: boolean
-    skybox?: boolean
-    backgroundColor?: string
-    filter?: Partial<Filter>
-    walls?: {
-        render?: boolean
-        alpha?: number
-        maxHeightCm?: number
-        showStructuralWalls?: boolean
-    }
-    doors?: boolean
-    windows?: boolean
-    flip?: boolean
-    objects?: boolean
-    floorplan?: {
-        render?: boolean
-        alpha?: number
-        elevationInCm?: number
-    }
-}
-
-declare interface SmplrCoord2d {
-    levelIndex: number;
-    x: number;
-    z: number;
-}
-
-declare interface SmplrCoord3d extends SmplrCoord2d {
-    elevation: number;
-}
-
-export declare class Space {
-    private options;
-    private viewerStarted;
-    private scene;
-    private container;
-    private setPickHandler;
-    private dispatchDataLayersDefinition;
-    constructor(options: SpaceOptions);
-    private checkOptions;
-    private prepareContainer;
-    remove: () => void;
-    preview({ mode, onViewerReady, onError }: DeprecatedPreviewProps): void;
-    startViewer(options: ViewerOptions): void;
-    addDataLayer<D extends UnknownData>(dataLayer: DataLayer<D>): void;
-    updateDataLayer<D extends UnknownData>(dataLayer: Partial<DataLayer<D>>): void;
-    removeDataLayer(id: string): void;
-    enablePickingMode({ onPick }: {
-        onPick: OnPickFn;
-    }): void;
-    disablePickingMode(): void;
-    getCameraPlacement(): OrbitCameraPlacement;
-    setCameraPlacement(placement: OrbitCameraPlacement): void;
-}
-
-declare interface Space_2 {
-    id: string
-    created_at: string
-    modified_at: string
-    name: string
-    public_link_enabled: boolean
-    status: 'draft' | 'published' | 'archived' | 'deleted'
-    definition: object | null
-    embed_image: string | null
-    short_code: string | null
-    assetmap: object | null
-}
-
-declare interface SpaceOptions {
-    spaceId: string;
-    clientToken: string;
-    containerId: string;
-}
-
-declare type UnknownData = Record<string, unknown>;
-
-declare interface Vector2Coord {
-    x: number;
-    y: number;
-}
-
-declare interface Vector3Coord extends Vector2Coord {
-    z: number;
-}
-
-export declare const version = "2.4.1-beta.13";
-
-declare interface ViewerOptions {
-    mode?: CameraMode;
-    preview?: boolean;
-    allowModeChange?: boolean;
-    cameraPlacement?: OrbitCameraPlacement;
-    disableCameraControls?: boolean;
-    hideNavigationButtons?: boolean;
-    compass?: boolean;
-    annotations?: boolean;
-    renderOptions?: RenderOptions;
-    onReady?: () => void;
-    onError?: (error: unknown) => void;
-    onModeChange?: (mode: CameraMode) => void;
-    loadingMessage?: string;
-}
-
-export { }

package/dist/index.d.ts

@@ -1,5 +0,0 @@
-import { Smplr } from './types';
-export type { Smplr } from './types';
-declare type BundleType = 'esm' | 'umd';
-declare type Env = 'prod' | 'dev' | 'local';
-export declare function loadSmplrJs(bundle?: BundleType, env?: Env): Promise<Smplr>;

package/dist/index.js

@@ -1,67 +0,0 @@
-const c = (r) => new Promise((o, s) => {
-  try {
-    const e = document.createElement("script");
-    e.type = "text/javascript", e.async = !0, e.src = r, e.addEventListener("load", () => {
-      o("ok");
-    }), e.addEventListener("error", () => {
-      s(`Failed to load the script from ${r}`);
-    }), document.body.appendChild(e);
-  } catch (e) {
-    s(e);
-  }
-}), p = (r) => import(
-  r
-  /* @vite-ignore */
-), a = (r) => new Promise((o, s) => {
-  try {
-    const e = document.createElement("link");
-    e.type = "text/css", e.href = r, e.rel = "stylesheet", e.addEventListener("load", () => {
-      o("ok");
-    }), e.addEventListener("error", () => {
-      const l = new Error(`Failed to load the stylesheet from ${r}`);
-      console.error(l), s(l);
-    }), document.head.appendChild(e);
-  } catch (e) {
-    console.error(e), s(e);
-  }
-}), t = {
-  umd: {
-    prod: "https://app.smplrspace.com/lib/smplr.js",
-    dev: "https://dev.smplrspace.com/lib/smplr.js",
-    local: "http://localhost:3000/lib/smplr.umd.js"
-  },
-  esm: {
-    prod: "https://app.smplrspace.com/lib/smplr.mjs",
-    dev: "https://dev.smplrspace.com/lib/smplr.mjs",
-    local: "http://localhost:3000/lib/smplr.mjs"
-  },
-  css: {
-    prod: "https://app.smplrspace.com/lib/smplr.css",
-    dev: "https://dev.smplrspace.com/lib/smplr.css",
-    local: "http://localhost:3000/lib/style.css"
-  }
-};
-async function d(r = "esm", o = "prod") {
-  try {
-    a(t.css[o]);
-  } catch {
-    console.warn("oops");
-  }
-  try {
-    if (r === "esm") {
-      const s = await p(t.esm[o]);
-      return console.log("loaded esm", s), s;
-    } else {
-      await c(t.umd[o]);
-      const s = window.smplr;
-      if (!s)
-        throw new Error("Failed to load smplr.js");
-      return console.log("loaded umd", s), s;
-    }
-  } catch (s) {
-    throw console.error(s), new Error("Failed to load smplr.js");
-  }
-}
-export {
-  d as loadSmplrJs
-};

package/dist/index.umd.cjs

@@ -1 +0,0 @@
-(function(r,l){typeof exports=="object"&&typeof module<"u"?l(exports):typeof define=="function"&&define.amd?define(["exports"],l):(r=typeof globalThis<"u"?globalThis:r||self,l(r.SmplrLoader={}))})(this,function(r){"use strict";const l=o=>new Promise((t,s)=>{try{const e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src=o,e.addEventListener("load",()=>{t("ok")}),e.addEventListener("error",()=>{s(`Failed to load the script from ${o}`)}),document.body.appendChild(e)}catch(e){s(e)}}),c=o=>import(o),n=o=>new Promise((t,s)=>{try{const e=document.createElement("link");e.type="text/css",e.href=o,e.rel="stylesheet",e.addEventListener("load",()=>{t("ok")}),e.addEventListener("error",()=>{const d=new Error(`Failed to load the stylesheet from ${o}`);console.error(d),s(d)}),document.head.appendChild(e)}catch(e){console.error(e),s(e)}}),p={umd:{prod:"https://app.smplrspace.com/lib/smplr.js",dev:"https://dev.smplrspace.com/lib/smplr.js",local:"http://localhost:3000/lib/smplr.umd.js"},esm:{prod:"https://app.smplrspace.com/lib/smplr.mjs",dev:"https://dev.smplrspace.com/lib/smplr.mjs",local:"http://localhost:3000/lib/smplr.mjs"},css:{prod:"https://app.smplrspace.com/lib/smplr.css",dev:"https://dev.smplrspace.com/lib/smplr.css",local:"http://localhost:3000/lib/style.css"}};async function m(o="esm",t="prod"){try{n(p.css[t])}catch{console.warn("oops")}try{if(o==="esm"){const s=await c(p.esm[t]);return console.log("loaded esm",s),s}else{await l(p.umd[t]);const s=window.smplr;if(!s)throw new Error("Failed to load smplr.js");return console.log("loaded umd",s),s}}catch(s){throw console.error(s),new Error("Failed to load smplr.js")}}r.loadSmplrJs=m,Object.defineProperty(r,Symbol.toStringTag,{value:"Module"})});

package/dist/loadScript.d.ts

@@ -1,2 +0,0 @@
-export declare const loadUmdScript: (url: string) => Promise<unknown>;
-export declare const loadEsmModule: (url: string) => Promise<any>;

package/dist/loadStylesheet.d.ts

@@ -1 +0,0 @@
-export declare const loadStylesheet: (url: string) => Promise<unknown>;