Browse Source

Added the new core and utils

pull/5/head
Navneet Sharma 1 year ago
parent
commit
6e583b326b
  1. 41
      README.md
  2. 1
      src/app.html
  3. 1
      src/lib/core/index.ts
  4. 12
      src/lib/core/services/https/http-json.ts
  5. 1
      src/lib/core/services/https/index.ts
  6. 1
      src/lib/core/services/index.ts
  7. 3
      src/lib/models/interfaces/ideserializable.interface.ts
  8. 6
      src/lib/shared/components/application-titles/ApplicationTitles.svelte
  9. 1
      src/lib/utils/index.ts
  10. 1
      src/lib/utils/logger/index.ts
  11. 46
      src/lib/utils/logger/logger.ts
  12. 8
      src/routes/$layout.svelte
  13. 24
      src/routes/index.svelte
  14. BIN
      static/logo-256.png
  15. 15
      static/manifest.json
  16. 3
      svelte.config.cjs
  17. 6
      tsconfig.json

41
README.md

@ -1,42 +1,3 @@ @@ -1,42 +1,3 @@
# create-svelte
# Sveltekit Starter
Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte);
## Creating a project
If you're seeing this, you've probably already done this step. Congrats!
```bash
# create a new project in the current directory
npm init svelte@next
# create a new project in my-app
npm init svelte@next my-app
```
> Note: the `@next` is temporary
## Developing
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
```bash
npm run dev
# or start the server and open the app in a new browser tab
npm run dev -- --open
```
## Building
Svelte apps are built with _adapters_, which optimise your project for deployment to different environments.
By default, `npm run build` will generate a Node app that you can run with `node build`. To use a different adapter, add it to the `devDependencies` in `package.json` making sure to specify the version as `next` and update your `svelte.config.cjs` to [specify your chosen adapter](https://kit.svelte.dev/docs#configuration-adapter). The following official adapters are available:
- [@sveltejs/adapter-node](https://github.com/sveltejs/kit/tree/master/packages/adapter-node)
- [@sveltejs/adapter-static](https://github.com/sveltejs/kit/tree/master/packages/adapter-static)
- [@sveltejs/adapter-netlify](https://github.com/sveltejs/kit/tree/master/packages/adapter-netlify)
- [@sveltejs/adapter-vercel](https://github.com/sveltejs/kit/tree/master/packages/adapter-vercel)
- ...more soon
[See the adapter documentation for more detail](https://kit.svelte.dev/docs#adapters)

1
src/app.html

@ -4,6 +4,7 @@ @@ -4,6 +4,7 @@
<meta charset="utf-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel='manifest' href='/manifest.json'>
%svelte.head%
</head>
<body>

1
src/lib/core/index.ts

@ -0,0 +1 @@ @@ -0,0 +1 @@
export * from './services';

12
src/lib/core/services/https/http-json.ts

@ -0,0 +1,12 @@ @@ -0,0 +1,12 @@
export class JSONHttp {
public async get<T>(url: string): Promise<T> {
const res = await this.fetch(url);
return res.json();
}
private async fetch(url: string): Promise<Response> {
return await fetch(url);
}
}
export const JSONHttpUtil = new JSONHttp();

1
src/lib/core/services/https/index.ts

@ -0,0 +1 @@ @@ -0,0 +1 @@
export { JSONHttp, JSONHttpUtil } from './http-json';

1
src/lib/core/services/index.ts

@ -0,0 +1 @@ @@ -0,0 +1 @@
export * from './https';

3
src/lib/models/interfaces/ideserializable.interface.ts

@ -0,0 +1,3 @@ @@ -0,0 +1,3 @@
export interface IDeserializable<T = unknown> {
deserialize(input: T): this;
}

6
src/lib/shared/components/application-titles/ApplicationTitles.svelte

@ -17,8 +17,10 @@ @@ -17,8 +17,10 @@
let title: string = '';
const getPathFromWindow = (): void => {
pathName = window ? window.location.pathname : '/';
title = getRouteTitle(pathName);
setTimeout(() => {
pathName = window ? window.location.pathname : '/';
title = getRouteTitle(pathName);
}, 300);
};
const onUpdate = (): void => {

1
src/lib/utils/index.ts

@ -0,0 +1 @@ @@ -0,0 +1 @@
export * from './logger';

1
src/lib/utils/logger/index.ts

@ -0,0 +1 @@ @@ -0,0 +1 @@
export { LogLevel, Logger, LoggerUtils } from './logger';

46
src/lib/utils/logger/logger.ts

@ -0,0 +1,46 @@ @@ -0,0 +1,46 @@
export enum LogLevel {
off = 0,
Debug,
Error,
Warning,
Info,
}
export class Logger {
static level = LogLevel.Debug;
private _source: string;
constructor(component: string) {
this._source = component;
}
public debug(...data: unknown[]): void {
this.log(console.log, LogLevel.Debug, data);
}
public info(...data: unknown[]): void {
this.log(console.info, LogLevel.Debug, data);
}
public warn(...data: unknown[]): void {
this.log(console.warn, LogLevel.Debug, data);
}
public error(...data: unknown[]): void {
this.log(console.error, LogLevel.Debug, data);
}
private log = (fun: () => void, level: LogLevel, objects: unknown[]): void => {
if (level >= Logger.level) {
const log = this._source ? ['[' + this._source + ']'].concat(objects as string[]) : objects;
fun.apply(console, log);
}
};
}
export const LoggerUtils = {
getInstance(className: string): Logger {
return new Logger(className);
},
};

8
src/routes/$layout.svelte

@ -36,7 +36,7 @@ @@ -36,7 +36,7 @@
<ApplicationTitles routePathData="{routeData}" />
<header class="text-gray-600 body-font">
<div class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
<a class="flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0" href="/">
<a rel="prefetch" class="flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0" href="/">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
@ -54,9 +54,9 @@ @@ -54,9 +54,9 @@
<nav
class="md:mr-auto md:ml-4 md:py-1 md:pl-4 md:border-l md:border-gray-400 flex flex-wrap items-center text-base justify-center"
>
<a class="mr-5 hover:text-gray-900" href="/">Home</a>
<a class="mr-5 hover:text-gray-900" href="/about">About</a>
<a class="mr-5 hover:text-gray-900" href="/settings">Settings</a>
<a rel="prefetch" class="mr-5 hover:text-gray-900" href="/">Home</a>
<a rel="prefetch" class="mr-5 hover:text-gray-900" href="/about">About</a>
<a rel="prefetch" class="mr-5 hover:text-gray-900" href="/settings">Settings</a>
</nav>
</div>
</header>

24
src/routes/index.svelte

@ -32,8 +32,32 @@ @@ -32,8 +32,32 @@
}
</style>
<script lang="ts" context="module">
export async function load({ page, fetch, session }) {
console.log(page);
console.log(session);
return {};
}
</script>
<script lang="ts">
import { JSONHttpUtil } from '$lib/core';
import Counter from '$lib/Counter.svelte';
import { goto } from '$app/navigation';
import { Logger, LoggerUtils } from '$lib/utils';
import { onMount } from 'svelte';
const logger: Logger = LoggerUtils.getInstance('Index');
onMount(async () => {
const data = await JSONHttpUtil.get<any>(
'https://jsonplaceholder.typicode.com/photos?_limit=20',
);
logger.debug(data);
});
</script>
<section class="text-gray-600 body-font">

BIN
static/logo-256.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

15
static/manifest.json

@ -0,0 +1,15 @@ @@ -0,0 +1,15 @@
{
"background_color": "#ffffff",
"theme_color": "#5cb85c",
"name": "Sveltekit Starter App",
"short_name": "Sveltekit",
"display": "minimal-ui",
"start_url": "/",
"icons": [
{
"src": "logo-256.png",
"sizes": "256x256",
"type": "image/png"
}
]
}

3
svelte.config.cjs

@ -33,7 +33,10 @@ module.exports = { @@ -33,7 +33,10 @@ module.exports = {
resolve: {
alias: {
$components: resolve(__dirname, './src/lib/shared/components'),
$shared: resolve(__dirname, './src/lib/shared'),
$models: resolve(__dirname, './src/lib/models'),
$core: resolve(__dirname, './src/lib/core'),
$utils: resolve(__dirname, './src/lib/utils'),
},
},
},

6
tsconfig.json

@ -26,6 +26,12 @@ @@ -26,6 +26,12 @@
"$app/*": [".svelte/dev/runtime/app/*", ".svelte/build/runtime/app/*"],
"$service-worker": [".svelte/build/runtime/service-worker"],
"$lib/*": ["src/lib/*"],
"$core": ["src/lib/core/index.ts"],
"$core/*": ["src/lib/core/*"],
"$utils": ["src/lib/utils/index.ts"],
"$utils/*": ["src/lib/utils/*"],
"$shared": ["src/lib/shared/index.ts"],
"$shared/*": ["src/lib/shared/*"],
"$components": ["src/lib/shared/components/index.ts"],
"$components/*": ["src/lib/shared/components/*"],
"$models": ["src/lib/models/index.ts"],

Loading…
Cancel
Save