@smoothcdn/loader 1.0.0 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/readme.md +22 -29
package/package.json
CHANGED
package/readme.md
CHANGED
|
@@ -38,35 +38,25 @@ The loader expects the standard Smooth CDN config shape:
|
|
|
38
38
|
|
|
39
39
|
```json
|
|
40
40
|
{
|
|
41
|
-
"userSlug": "
|
|
42
|
-
"projectSlug": "
|
|
43
|
-
"
|
|
44
|
-
"sources": ["./public/*", "
|
|
45
|
-
"excludes": ["./public/*.txt", "
|
|
41
|
+
"userSlug": "your-team",
|
|
42
|
+
"projectSlug": "frontend-app",
|
|
43
|
+
"version": "1.0.0",
|
|
44
|
+
"sources": ["./public/*", "./dist/**/*"],
|
|
45
|
+
"excludes": ["./public/*.txt", "./dist/**/*.map"],
|
|
46
46
|
"replacePath": {
|
|
47
|
-
"
|
|
47
|
+
"/dist/": "/assets/"
|
|
48
48
|
},
|
|
49
49
|
"imageVariants": {
|
|
50
|
-
"
|
|
51
|
-
"
|
|
52
|
-
"
|
|
53
|
-
"768": 768,
|
|
54
|
-
"960": 960,
|
|
55
|
-
"1200": 1200
|
|
50
|
+
"mobile": 360,
|
|
51
|
+
"tablet": 720,
|
|
52
|
+
"desktop": 1600
|
|
56
53
|
}
|
|
57
54
|
}
|
|
58
55
|
```
|
|
59
56
|
|
|
60
57
|
Use `replacePath` when files are collected from one location but should be referenced from another public path. `replacePaths` is also accepted as an alias.
|
|
61
58
|
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
```ts
|
|
65
|
-
buildUrl("/public/logo.svg");
|
|
66
|
-
// https://web.smoothcdn.com/public/logo.svg
|
|
67
|
-
```
|
|
68
|
-
|
|
69
|
-
Without `customSubdomain`, URLs use the standard Smooth CDN path:
|
|
59
|
+
URLs use the standard Smooth CDN path:
|
|
70
60
|
|
|
71
61
|
```ts
|
|
72
62
|
buildUrl("/public/logo.svg");
|
|
@@ -95,15 +85,14 @@ To write the file somewhere else:
|
|
|
95
85
|
scdn types --output src/smoothcdn-loader.ts
|
|
96
86
|
```
|
|
97
87
|
|
|
98
|
-
Once the generated module is included in your app bootstrap,
|
|
88
|
+
Once the generated module is included in your app bootstrap, components imported from `@smoothcdn/loader` use those generated asset types automatically:
|
|
99
89
|
|
|
100
|
-
```
|
|
101
|
-
import {
|
|
102
|
-
|
|
103
|
-
const loader = createLoader();
|
|
90
|
+
```tsx
|
|
91
|
+
import { CDNImage } from "@smoothcdn/loader/react";
|
|
104
92
|
|
|
105
|
-
|
|
106
|
-
|
|
93
|
+
export function Logo() {
|
|
94
|
+
return <CDNImage assetPath="/public/logo.svg" alt="Smooth CDN" width={40} height={40} />;
|
|
95
|
+
}
|
|
107
96
|
```
|
|
108
97
|
|
|
109
98
|
Commit `smoothcdn-loader.ts` with your app if you want asset-path autocomplete to work without regenerating it on every install. The `.scdn` directory can stay ignored.
|
|
@@ -115,19 +104,23 @@ Commit `smoothcdn-loader.ts` with your app if you want asset-path autocomplete t
|
|
|
115
104
|
|
|
116
105
|
## Core
|
|
117
106
|
|
|
118
|
-
Use the core loader
|
|
107
|
+
Use the core loader when you need a CDN URL or an imperative load outside a component.
|
|
119
108
|
|
|
120
109
|
```ts
|
|
121
110
|
import { createLoader } from "@smoothcdn/loader";
|
|
122
111
|
|
|
123
112
|
const loader = createLoader();
|
|
124
113
|
|
|
114
|
+
// Build a CDN URL for href, src, metadata or third-party APIs.
|
|
125
115
|
const logoUrl = loader.url("/public/logo.svg");
|
|
116
|
+
document.querySelector("a.download-logo")?.setAttribute("href", logoUrl);
|
|
126
117
|
|
|
118
|
+
// Load browser assets imperatively.
|
|
127
119
|
await loader.script("/public/app.js");
|
|
128
120
|
await loader.style("/public/app.css");
|
|
129
|
-
await loader.image("/public/
|
|
121
|
+
await loader.image("/public/hero.png");
|
|
130
122
|
|
|
123
|
+
// Fetch a CDN-hosted JSON or XML asset.
|
|
131
124
|
const response = await loader.fetch("/public/data.json");
|
|
132
125
|
const data = await response.json();
|
|
133
126
|
```
|