@smplrspace/smplr-loader 0.0.1-beta.0

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/README.md

@@ -0,0 +1,2 @@
+# smplr-loader
+This tiny NPM package can be installed to easily load a typed version of Smplr.js from our CDN in your code. See [the documentation](https://docs.smplrspace.com/) to learn more.

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@smplrspace/smplr-loader",
+  "version": "0.0.1-beta.0",
+  "description": "NPM package to load a typed Smplr.js from CDN easily",
+  "main": "src/index.ts",
+  "scripts": {
+    "dev": "echo 'No dev'",
+    "serve": "echo 'No serve'",
+    "libtest": "echo 'No libtest'",
+    "tsc": "tsc --noEmit",
+    "lint": "eslint . && prettier --check **/*.json && yarn tsc",
+    "lint:fix": "eslint --fix . && prettier -w **/*.json"
+  },
+  "lint-staged": {
+    "*.ts": [
+      "yarn run eslint"
+    ],
+    "*.json": [
+      "yarn run prettier --check"
+    ]
+  },
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^5.42.0",
+    "@typescript-eslint/parser": "^5.42.0",
+    "eslint": "^8.26.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-import-resolver-typescript": "^3.5.2",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "prettier": "^2.7.1",
+    "typescript": "4.7.4"
+  },
+  "homepage": "https://www.smplrspace.com",
+  "keywords": [
+    "smplrspace",
+    "floor plan",
+    "digital twin"
+  ],
+  "packageManager": "yarn@3.2.4"
+}

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/src/types.d.ts

@@ -0,0 +1,15 @@
+// eslint-disable-next-line import/no-unresolved
+import * as smplr from './generated/smplr'
+
+export {}
+
+export interface Smplr {
+  version: typeof smplr.version
+  Space: typeof smplr.Space
+}
+
+declare global {
+  interface Window {
+    smplr?: Smplr
+  }
+}

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"]
+}