Initial Commit Svelte Sample

.eslintrc

@@ -0,0 +1,11 @@
+{
+  "env": {
+    "node": true
+  },
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "plugins": ["n","@servicenow/sdk-app-plugin"],
+  "extends": ["plugin:@servicenow/sdk-app-plugin/recommended"]
+}

.gitignore

@@ -0,0 +1,7 @@
+.DS_Store
+.now/
+dist/
+node_modules/
+target/
+*.tsbuildinfo
+.jest_cache

README.md

@@ -0,0 +1 @@
+# Svelte UI Example

now.config.json

@@ -0,0 +1,5 @@
+{
+  "scope": "x_svelteuisample",
+  "scopeId": "d784d194f0f74d0783f07bb902f227a7",
+  "name": "Svelte UI Example"
+}

now.prebuild.mjs

@@ -0,0 +1,60 @@
+import svelte from 'rollup-plugin-svelte'
+import resolve from '@rollup/plugin-node-resolve'
+import { servicenowFrontEndPlugins, rollup, glob } from '@servicenow/isomorphic-rollup'
+
+/**
+ * Prebuild script for building the client assets of the application before running the rest of the build.
+ * Export an async function that accepts useful modules for building the application as arguments.
+ * This function returns a Promise that resolves when the build is complete.
+ * You can also export an array of functions if you want to run multiple prebuild steps.
+ */
+export default async ({ rootDir, config, fs, path, logger, registerExplicitId }) => {
+    // This is where all the client source files are located
+    const clientDir = path.join(rootDir, config.clientDir)
+    const htmlFilePattern = path.join('**', '*.html')
+    const htmlFiles = await glob(htmlFilePattern, { cwd: clientDir, fs })
+    if (!htmlFiles.length) {
+        logger.warn(`No HTML files found in ${clientDir}, skipping UI build.`)
+        return
+    }
+
+    // This is the destination for the build output
+    const staticContentDir = path.join(rootDir, config.staticContentDir)
+    // Clean up any previous build output
+    fs.rmSync(staticContentDir, { recursive: true, force: true })
+
+    // Call the rollup build
+    const rollupBundle = await rollup({
+        // Use the file system module provided by the build environment
+        fs,
+        // Search all HTML files in the client directory to find entry points
+        input: path.join(clientDir, '**', '*.html'),
+        // Use the default set of ServiceNow plugins for Rollup
+        // configured for the scope name and root directory
+        plugins: [
+            svelte({
+                include: path.join(clientDir, '**', '*.svelte'),
+            }),
+            resolve({ browser: true, exportConditions: ['svelte'], extensions: ['.svelte'] }),
+            servicenowFrontEndPlugins({
+                scope: config.scope,
+                rootDir: clientDir,
+                registerExplicitId,
+            }),
+        ],
+    })
+    // Write the build output to the configured destination
+    // including source maps for JavaScript files
+    const rollupOutput = await rollupBundle.write({
+        dir: staticContentDir,
+        sourcemap: true,
+    })
+    // Print the build results
+    rollupOutput.output.forEach((file) => {
+        if (file.type === 'asset') {
+            logger.info(`Bundled asset: ${file.fileName} (${file.source.length} bytes)`)
+        } else if (file.type === 'chunk') {
+            logger.info(`Bundled chunk: ${file.fileName} (${file.code.length} bytes)`)
+        }
+    })
+}

package.json

@@ -0,0 +1,23 @@
+{
+    "name": "svelte-ui-page-sample",
+    "version": "0.0.1",
+    "description": "",
+    "license": "UNLICENSED",
+    "scripts": {
+        "build": "now-sdk build",
+        "deploy": "now-sdk install",
+        "transform": "now-sdk transform",
+        "types": "now-sdk dependencies"
+    },
+    "devDependencies": {
+        "@servicenow/glide": "27.0.3",
+        "@servicenow/sdk": "4.2.0",
+        "typescript": "5.8.2",
+        "eslint": "8.50.0",
+        "@servicenow/eslint-plugin-sdk-app-plugin": "4.2.0",
+        "@servicenow/isomorphic-rollup": "^1.2.1",
+        "svelte": "5.38.7",
+        "rollup-plugin-svelte": "7.2.3",
+        "@rollup/plugin-node-resolve": "16.0.1"
+    }
+}

src/client/app.svelte

@@ -0,0 +1,11 @@
+<script>
+	let name = $state('world');
+	let count = $state(0);
+</script>
+
+<h1>Hello {name}!</h1>
+
+<input bind:value={name} />
+<button onclick={() => count += 1}>
+	clicks: {count}
+</button>

src/client/index.html

@@ -0,0 +1,17 @@
+<html>
+
+<head>
+  <meta charset='utf8'>
+  <meta name='viewport' content='width=device-width'>
+
+  <title>Svelte app</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src='main.js'></script>
+</body>
+
+
+
+</html>

src/client/main.js

@@ -0,0 +1,8 @@
+import { mount } from 'svelte'
+import App from './App.svelte'
+
+const app = mount(App, {
+    target: document.getElementById('root'),
+})
+
+export default app

src/fluent/generated/keys.ts

@@ -0,0 +1,32 @@
+import '@servicenow/sdk/global'
+
+declare global {
+    namespace Now {
+        namespace Internal {
+            interface Keys extends KeysRegistry {
+                explicit: {
+                    bom_json: {
+                        table: 'sys_module'
+                        id: '4793b6956f9f43ba8f0118e996a57a60'
+                    }
+                    package_json: {
+                        table: 'sys_module'
+                        id: '4e99f0f1bb40402e91ab4b1516366525'
+                    }
+                    'svelte-sample-ui-page': {
+                        table: 'sys_ui_page'
+                        id: '074bbcf305404e67ba1e6a07225df0a6'
+                    }
+                    'x_svelteuisample/main': {
+                        table: 'sys_ux_lib_asset'
+                        id: '6c43b0666ffd4d40b30e0ba5448145f7'
+                    }
+                    'x_svelteuisample/main.js.map': {
+                        table: 'sys_ux_lib_asset'
+                        id: '4409af63206a49b6a8545b72824a1452'
+                    }
+                }
+            }
+        }
+    }
+}

src/fluent/index.now.ts

@@ -0,0 +1 @@
+//Add your Fluent APIs here and in other now.ts files under src/fluent

src/fluent/ui-pages/svelte-hello-world.now.ts

@@ -0,0 +1,12 @@
+import '@servicenow/sdk/global'
+import { UiPage } from '@servicenow/sdk/core'
+import incidentPage from '../../client/index.html'
+
+UiPage({
+    $id: Now.ID['svelte-sample-ui-page'],
+    endpoint: 'x_svelteuisample_sample.do',
+    description: 'Svelte Sample UI Page',
+    category: 'general',
+    html: incidentPage,
+    direct: true,
+})

src/server/tsconfig.json

@@ -0,0 +1,21 @@
+{
+    "compilerOptions": {
+        "rootDir": "./",
+        "outDir": "../../dist/server",
+        "module": "es2022",
+        "target": "es2022",
+        "moduleResolution": "bundler",
+        "allowJs": true,
+        "declaration": false,
+        "sourceMap": false,
+        "skipLibCheck": true,
+        "allowImportingTsExtensions": true,
+        "noEmit": true
+    },
+    "include": [
+        "./**/*.ts"
+    ],
+    "exclude": [
+        "**/*.now.ts"
+    ]
+}