🩹 fix(patch): fix s3 errors (#2574)

.github/workflows/test.unit.yml

@@ -36,3 +36,6 @@ jobs:
 
       - name: yarn @bud test unit
         run: yarn @bud test unit
+        env:
+          AWS_ACCESS_KEY_ID: ${{secrets.AWS_ACCESS_KEY_ID}}
+          AWS_SECRET_ACCESS_KEY: ${{secrets.AWS_SECRET_ACCESS_KEY}}

examples/s3/bud.config.ts

@@ -0,0 +1,16 @@
+import {bud} from '@roots/bud'
+
+bud
+  .html()
+  .when(bud.isProduction, bud =>
+    bud.setPublicPath(
+      `https://bud-js-tests.s3.us-west-2.amazonaws.com/examples/s3/`,
+    ),
+  )
+  .fs.setCredentials({
+    accessKeyId: bud.env.get(`AWS_ACCESS_KEY_ID`),
+    secretAccessKey: bud.env.get(`AWS_SECRET_ACCESS_KEY`),
+  })
+  .setRegion(`us-west-2`)
+  .setBucket(`bud-js-tests`)
+  .upload({destination: `examples/s3`})

examples/s3/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "@examples/s3",
+  "$schema": "https://bud.js.org/bud.package.json",
+  "private": true,
+  "type": "module",
+  "browserslist": [
+    "extends @roots/browserslist-config"
+  ],
+  "devDependencies": {
+    "@roots/bud": "workspace:*",
+    "@roots/bud-preset-recommend": "workspace:*",
+    "@roots/bud-react": "workspace:*"
+  }
+}

examples/s3/src/app.css

@@ -0,0 +1,50 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
+    'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
+    'Helvetica Neue', sans-serif;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}
+
+.App {
+  width: 100vw;
+  max-width: 100vw;
+  height: 100vh;
+  max-height: 100vh;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  background-color: rgba(4, 1, 17, 1);
+
+  & .logo {
+    height: 30vmin;
+    pointer-events: none;
+    margin-bottom: 2rem;
+    animation: App-logo-spin infinite 20s linear;
+  }
+
+  & .header {
+    min-height: 80vh;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    font-size: calc(10px + 2vmin);
+    color: white;
+  }
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

examples/s3/src/components/App.js

@@ -0,0 +1,12 @@
+import logo from './logo.svg'
+
+export const App = () => {
+  return (
+    <div className="App">
+      <div className="header">
+        <img src={logo} className="logo" alt="logo" />
+        Edit <code>src/components/App.js</code> and save to reload
+      </div>
+    </div>
+  )
+}

examples/s3/src/index.js

@@ -0,0 +1,7 @@
+import {createRoot} from 'react-dom/client'
+
+import {App} from './components/App.js'
+
+import './app.css'
+
+createRoot(document.getElementById('root')).render(<App />)

examples/s3/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "@roots/bud/config/tsconfig.json",
+  "compilerOptions": {
+    "paths": {
+      "@src/*": ["./src/*"]
+    },
+    "types": ["@roots/bud", "@roots/bud-preset-recommend", "@roots/bud-react"]
+  },
+  "files": ["./bud.config.ts"],
+  "include": ["./src"],
+  "exclude": ["./dist"]
+}

sources/@roots/bud-framework/src/fs.ts

@@ -90,10 +90,7 @@ export class FS extends Filesystem implements Contract {
    */
   @bind
   public setBucket(bucket: string) {
-    this.app.after(async () => {
-      this.s3.config.set(`bucket`, bucket)
-    })
-
+    this.s3.config.set(`bucket`, bucket)
     return this
   }
 
@@ -106,10 +103,7 @@ export class FS extends Filesystem implements Contract {
    */
   @bind
   public setCredentials(credentials: S3[`config`][`credentials`]) {
-    this.app.after(async () => {
-      this.s3.config.set(`credentials`, credentials)
-    })
-
+    this.s3.config.set(`credentials`, credentials)
     return this
   }
 
@@ -122,10 +116,7 @@ export class FS extends Filesystem implements Contract {
    */
   @bind
   public setEndpoint(endpoint: S3[`config`][`endpoint`]) {
-    this.app.after(async () => {
-      this.s3.config.set(`endpoint`, endpoint)
-    })
-
+    this.s3.config.set(`endpoint`, endpoint)
     return this
   }
 
@@ -138,10 +129,7 @@ export class FS extends Filesystem implements Contract {
    */
   @bind
   public setRegion(region: S3[`config`][`region`]) {
-    this.app.after(async () => {
-      this.s3.config.set(`region`, region)
-    })
-
+    this.s3.config.set(`region`, region)
     return this
   }
 
@@ -159,33 +147,38 @@ export class FS extends Filesystem implements Contract {
     keep?: false | number
     source?: string
   }): this {
-    if (!this.s3.config.credentials) {
-      throw BudError.normalize(
-        `S3 is not configured. See https://bud.js.org/reference/bud.fs/s3`,
-      )
-    }
+    this.app.after(async () => {
+      if (!this.s3.config.credentials) {
+        throw BudError.normalize(
+          `S3 is not configured. See https://bud.js.org/reference/bud.fs/s3`,
+        )
+      }
 
-    const {destination, files, keep, source} = {
-      destination: options?.destination,
-      files: options?.files ?? `**/*`,
-      keep:
-        isNumber(options?.keep) || isBoolean(options?.keep)
-          ? options?.keep
-          : 5,
-      source: options?.source ?? this.app.path(`@dist`),
-    }
+      const s3Path = (path: string) =>
+        destination ? join(destination, path) : path
 
-    const s3Path = (path: string) =>
-      destination ? join(destination, path) : path
+      const {destination, files, keep, source} = {
+        destination: options?.destination,
+        files: options?.files ?? `**/*`,
+        keep:
+          isNumber(options?.keep) || isBoolean(options?.keep)
+            ? options?.keep
+            : 5,
+        source: options?.source ?? this.app.path(`@dist`),
+      }
 
-    this.app.after(async () => {
-      // eslint-disable-next-line
-      console.log(`Uploading...`)
+      // eslint-disable-next-line no-console
+      console.log(`\nUploading files to ${this.s3.ident}`)
 
       await globby(files, {cwd: source}).then(async files => {
         const descriptions = await Promise.all(
           files.map(async file => {
+            this.logger.info(
+              `Attempting to read ${file}:`,
+              join(source, file),
+            )
             const contents = await this.read(join(source, file), `buffer`)
+            this.logger.info(`Read ${file}:`, contents)
             return {contents, file}
           }),
         )
@@ -261,6 +254,9 @@ export class FS extends Filesystem implements Contract {
         this.logger.timeEnd(
           `Write upload-manifest.json to ${this.s3.ident}`,
         )
+
+        // eslint-disable-next-line no-console
+        console.log(`\nUpload complete`)
       })
     })
 

sources/@roots/filesystem/src/s3/config.ts

@@ -36,9 +36,7 @@ export class Config {
    * @returns value - {@link S3ClientConfig} value
    */
   public get<
-    K extends `${
-      | (keyof Config & string)
-      | (keyof S3ClientConfig & keyof Config & string)}`,
+    K extends `bucket` | `credentials` | `endpoint` | `public` | `region`,
   >(key: K): this[K] {
     return this[key]
   }
@@ -51,9 +49,7 @@ export class Config {
    * @returns void
    */
   public set<
-    K extends `${
-      | (keyof Config & string)
-      | (keyof S3ClientConfig & keyof Config & string)}`,
+    K extends `bucket` | `credentials` | `endpoint` | `public` | `region`,
   >(key: K, value: this[K]): void {
     this[key] = value
   }