scripts/createSvelte.sh at main · fluss/scripts · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
#!/bin/bash
rm -- "$0"

echo "installing jq"
brew install jq

echo "Please enter your GitHub token:"
read -s GITHUB_TOKEN
echo

if [ -z "$GITHUB_TOKEN" ]; then
    echo "Error: GitHub token cannot be empty"
    exit 1
fi

cat > .yarnrc.yml << EOF
nodeLinker: node-modules
enableGlobalCache: true
enableTelemetry: false
npmRegistryServer: "https://registry.npmjs.org"

npmRegistries:
  "https://npm.pkg.github.com":
    npmAuthToken: $GITHUB_TOKEN

npmScopes:
  fluss:
    npmRegistryServer: "https://npm.pkg.github.com"
    npmPublishRegistry: "https://npm.pkg.github.com"
EOF

yarn init
rm .editorconfig .gitattributes .pnp.cjs

if [ -f "package.json" ]; then
    if command -v jq &> /dev/null; then
        jq '. + {"workspaces": ["app"]}' package.json > package.json.tmp && mv package.json.tmp package.json
        echo "✓ package.json has been updated with workspaces!"
    else
        sed -i.bak 's/"packageManager":/"workspaces": [\n    "app"\n  ],\n  "packageManager":/' package.json
        rm package.json.bak 2>/dev/null
        echo "✓ package.json has been updated with workspaces (using sed)!"
    fi
else
    echo "⚠ Warning: package.json not found, skipping workspace setup"
fi

echo "✓ .yarnrc.yml has been created successfully!"

mkdir app && cd app

echo "Going to create svelte project, follow the prompts: press enter for everything, selcet YES for existing project"

npx sv create

yarn add @fluss/auth
yarn add vitest -D
yarn add @sveltejs/adapter-static -D

rm -rf static
rm .npmrc

cat > vite.config.ts << EOF
import { defineConfig } from "vitest/config";
import { sveltekit } from '@sveltejs/kit/vite';

export default defineConfig({
    plugins: [sveltekit()],
    ssr: {
        noExternal: ['@fluss/auth']
    },
    test: {
        include: ['src/**/*.{test,spec}.{js,ts}']
    }
});
EOF

cat > svelte.config.js << EOF
import adapter from '@sveltejs/adapter-static';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	preprocess: vitePreprocess(),

	kit: {
		adapter: adapter({
			pages: 'dist',
			assets: 'dist',
			precompress: false
		})
	}
};

export default config;
EOF

cd src

cat > app.html << EOF
<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		%sveltekit.head%
	</head>
	<body data-sveltekit-preload-data="hover">
		<div style="display: contents">%sveltekit.body%</div>
	</body>
</html>
EOF

cd routes

cat > +layout.svelte << EOF
<script lang="ts">
</script>

<main>
  <slot />
</main>

<style>
  main {
    min-height: 100vh;
  }
</style>
EOF

cat > +page.svelte << EOF
<script lang="ts">
    import { authStore } from "@fluss/auth";
    import { onMount } from "svelte";
    import { get } from "svelte/store";

    $: loggedInState = false

    onMount(async() => {
        const authState = get(authStore)
        const accessToken = authState.accessToken
        if (accessToken) {
            const verified = await authStore.verifyTokens()
            if (!verified) {
                await authStore.refreshToken()
            }
            loggedInState = true
        } else {
            await authStore.startAuthFlow()
        }

    })
</script>


<main class="d-flex justify-content-center align-items-center vh-100">
	{#if loggedInState}
		<h1 class="fw-bold">You are logged in</h1>
	{/if}
</main>
EOF

mkdir auth && cd auth
mkdir callback && cd callback


cat > +page.svelte << 'EOF'
<script lang="ts">
  import { onMount } from 'svelte'
  import { goto } from '$app/navigation'
  import { page } from '$app/stores'
  import { authStore } from '@fluss/auth'

  let loading = true
  let error = ''

  onMount(async () => {
    const code = $page.url.searchParams.get('code')
    const errorParam = $page.url.searchParams.get('error')

    if (errorParam) {
      error = `Authentication error: ${errorParam}`
      loading = false
      return
    }

    if (!code) {
      error = 'No authorization code received'
      loading = false
      return
    }

    try {
      await authStore.handleAuthCallback(code)
      goto('/')
    } catch (err: any) {
      error = err.message
    } finally {
      loading = false
    }
  })
</script>

{#if loading}
  <div>
    <div>
      <div></div>
      <p>Completing authentication...</p>
    </div>
  </div>
{:else if error}
  <div>
    <div>
      <div>
        <h2>Authentication Failed</h2>
        <p>{error}</p>
        <button
          on:click={() => goto('/')}
        >
          Return Home
        </button>
      </div>
    </div>
  </div>
{/if}
EOF

cd ../../../../../

echo "Svelte project created cd into app and run 'yarn dev' and your app should run locally"
echo
echo "The final step is to setup your config.json - Please supply the following:"

echo "Please enter your clientId (this should match in your backend):"
read -s CLIENT_ID
echo

echo "Please enter your authorisation url:"
read -s AUTH_URL
echo

echo "Your redirect url has been set to http://localhost:5173/auth/callback"

if [ -z "$CLIENT_ID" ]; then
    echo "Error: clientId cannot be empty"
    exit 1
fi

if [ -z "$AUTH_URL" ]; then
    echo "Error: authorisation url cannot be empty"
    exit 1
fi

cat > config.json << EOF
{
  "auth": {
    "clientId": "$CLIENT_ID",
    "AUTH_URL": "$AUTH_URL",
    "REDIRECT_URL": "http://localhost:5173/auth/callback"
  }
}
EOF

cd app

echo "Run yarn dev to generate the .sveltekit, you may need to run this twice"s