Svelte Google Script

#Starter from Svelte with google HtmlService

Setup in VSCode

npm create vite@latest

cd my-awesome-sfa

npm install

npm install @sveltejs/vite-plugin-svelte vite-plugin-singlefile

npm run dev

Edit vite.config.js as

import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';
import { viteSingleFile } from 'vite-plugin-singlefile';
export default defineConfig(({ command }) => ({
    plugins: [
        svelte({
            /* plugin options */
        }),
        command === 'build' &&
            viteSingleFile({
                removeViteModuleLoader: true
            })
    ],
    build: {
        minify: false
    }
}));

Edit main.js as

import App from './App.svelte'

const app = new App({
  target: document.getElementById('app'),
})

export default app

Edit App.svelte as

  <script>
    let loading = false;
    let returneData;
    export async function fetchData_Input(some_input) {
        loading = true;
        returneData = null;
        return new Promise((resolve, reject) => {
            // @ts-ignore
            google.script.run
                .withSuccessHandler((receivedData) => {
                    resolve(JSON.parse(receivedData));
                    returneData = JSON.parse(receivedData);
                    console.log(JSON.parse(receivedData));
                    loading = false;
                })
                .withFailureHandler((error) => {
                    reject(error);
                })
                .googlescr_fetchData_Input(some_input);
                // Function from Code.gs 
        });
    }
</script>

<main>
    <button on:click={() => fetchData_Input("DataSh")}> TEST_DATA</button>
    <!-- in my case DataSh is name of sheet where data is stored -->
    {#if loading}
        <p>Please Wait ....</p>
    {/if}
    {#if returneData}
        {returneData}
    {/if}
</main>

run npm run build

This should create index.html in folder dist

Setup google sheets

Create an google Sheet

Rename Sheet1 to DataSh

Access scripts via Ectensions -> Apps Scripts

Add file of tipe html named index and
copy content of index.html from folder dist to index.html from Apps Scripts

Edit file (from Apps Scripts) Code.gs as

  function doGet(e) {
  return HtmlService.createTemplateFromFile('index.html')
    .evaluate().setTitle('Title')
    .addMetaTag('viewport', 'width=device-width, initial-scale=1')
}

function googlescr_fetchData_Input(some_input) {
  var spreadsheet = SpreadsheetApp.getActive();
  var ssConstants = spreadsheet.getSheetByName(some_input)
  if (ssConstants === null) {
    return false;
  }

  let data  = ssConstants.getRange("A1:B5").getDisplayValues();
  return JSON.stringify(data);
}
  

In Apps Script access Deploy -> New deployment

Select type Web app make configurations if you wish so and push Deploy

This will generate and link to your Web app