Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit a839ed2

Browse files
nartcnartc
committed
update analogjs to fix docs build
1 parent 94260e8 commit a839ed2

11 files changed

+198
-166
lines changed

‎apps/astro-docs/astro.config.mjs

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,8 @@ import { defineConfig } from 'astro/config';
77
// https://astro.build/config
88
export default defineConfig({
99
vite: {
10-
// optimizeDeps: {
11-
// include: ['rxjs', 'rxjs/operators', '@angular/common', '@angular/common/http', '@angular/core/rxjs-interop'],
12-
// },
1310
ssr: {
1411
noExternal: [
15-
// /fesm/,
1612
'angular-three',
1713
'angular-three-soba/**',
1814
'@angular/common',

‎apps/astro-docs/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
"astro": "astro"
1111
},
1212
"dependencies": {
13-
"@analogjs/astro-angular": "^1.6.3",
13+
"@analogjs/astro-angular": "^1.6.4-beta.1",
1414
"@angular-devkit/build-angular": "^18.1.1",
1515
"@angular/animations": "^18.1.1",
1616
"@angular/common": "^18.1.1",

‎apps/astro-docs/src/components/first-scene/first-scene.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ extend(THREE);
1414
changeDetection: ChangeDetectionStrategy.OnPush,
1515
host: { class: 'first-scene' },
1616
})
17-
export class FirstScene {
17+
export default class FirstScene {
1818
step = input.required<keyof typeof scenes>();
1919
sceneGraph = computed(() => scenes[this.step()]);
2020
}

‎apps/astro-docs/src/components/first-scene/scene-graph-step-five.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
viewChild,
99
} from '@angular/core';
1010
import { injectBeforeRender, type NgtVector3 } from 'angular-three';
11-
import { Mesh } from 'three';
11+
import type { Mesh } from 'three';
1212

1313
@Component({
1414
selector: 'app-cube',

‎apps/astro-docs/src/components/first-scene/scene-graph-step-four.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
viewChild,
99
} from '@angular/core';
1010
import { injectBeforeRender, type NgtVector3 } from 'angular-three';
11-
import { Mesh } from 'three';
11+
import type { Mesh } from 'three';
1212

1313
@Component({
1414
selector: 'app-cube',

‎apps/astro-docs/src/components/first-scene/scene-graph-step-six.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
viewChild,
99
} from '@angular/core';
1010
import { extend, injectBeforeRender, injectStore, NgtArgs, type NgtVector3 } from 'angular-three';
11-
import { Mesh } from 'three';
11+
import type { Mesh } from 'three';
1212
import { OrbitControls } from 'three-stdlib';
1313

1414
extend({ OrbitControls });

‎apps/astro-docs/src/components/first-scene/scene-graph-step-three.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {
77
viewChild,
88
} from '@angular/core';
99
import { injectBeforeRender } from 'angular-three';
10-
import { Mesh } from 'three';
10+
import type { Mesh } from 'three';
1111

1212
@Component({
1313
standalone: true,

‎apps/astro-docs/src/components/first-scene/scene-graph-step-two.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA, type ElementRef, viewChild } from '@angular/core';
22
import { injectBeforeRender } from 'angular-three';
3-
import { Mesh } from 'three';
3+
import type { Mesh } from 'three';
44

55
@Component({
66
standalone: true,

‎apps/astro-docs/src/content/docs/core/getting-started/first-scene.mdx

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ description: Create our first 3D scene with Angular Three.
44
---
55

66
import { Tabs, TabItem } from '@astrojs/starlight/components';
7-
import { FirstScene } from '../../../../components/first-scene/first-scene.ts';
7+
import FirstScene from '../../../../components/first-scene/first-scene';
88

99
Before diving into the API details of Angular Three, let's create a simple scene together to get a feel for what it's like to use Angular Three.
1010

@@ -59,6 +59,7 @@ export class AppComponent {
5959
```
6060

6161
`NgtCanvas` uses the `sceneGraph` input to render the `SceneGraph` component with the Custom Renderer as well as sets up the following THREE.js building blocks:
62+
6263
- A `WebGLRenderer` with anti-aliasing enabled and transparent background.
6364
- A default `PerspectiveCamera` with a default position of `[x:0, y:0, z:5]`.
6465
- A default `Scene`
@@ -72,9 +73,9 @@ We'll set up some basic styles in `styles.css`
7273
```css title="src/styles.css"
7374
html,
7475
body {
75-
height: 100%;
76-
width: 100%;
77-
margin: 0;
76+
height: 100%;
77+
width: 100%;
78+
margin: 0;
7879
}
7980
```
8081

@@ -110,7 +111,7 @@ export class AppComponent {
110111

111112
```html
112113
<div class="canvas-container">
113-
<ngt-canvas [sceneGraph]="sceneGraph" />
114+
<ngt-canvas [sceneGraph]="sceneGraph" />
114115
</div>
115116
```
116117

@@ -145,8 +146,8 @@ The catalogue isn't limited to THREE.js core entities. We can extend the catalog
145146
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
146147

147148
extend({
148-
OrbitControls // makes ngt-orbit-controls available
149-
})
149+
OrbitControls, // makes ngt-orbit-controls available
150+
});
150151
```
151152

152153
:::
@@ -199,7 +200,7 @@ export class SceneGraph {}
199200
And here's the result:
200201

201202
<div class="h-96 w-full border border-dashed border-accent-500 rounded">
202-
<FirstScene client:only step="stepOne" />
203+
<FirstScene client:only step="stepOne" />
203204
</div>
204205

205206
## Animation
@@ -239,7 +240,7 @@ export class SceneGraph {
239240
```
240241

241242
<div class="h-96 w-full border border-dashed border-accent-500 rounded">
242-
<FirstScene client:only step="stepTwo" />
243+
<FirstScene client:only step="stepTwo" />
243244
</div>
244245

245246
## Make a Component
@@ -274,6 +275,7 @@ Using Angular means we can make components out of our template. Let's do that fo
274275
}
275276
}
276277
```
278+
277279
</TabItem>
278280

279281
<TabItem label="src/app/scene-graph.component.ts">
@@ -295,6 +297,7 @@ Using Angular means we can make components out of our template. Let's do that fo
295297
})
296298
export class SceneGraph {}
297299
```
300+
298301
</TabItem>
299302
</Tabs>
300303

@@ -347,7 +350,7 @@ export class Cube {
347350
Our cube is now _interactive_!
348351

349352
<div class="h-96 w-full border border-dashed border-accent-500 rounded">
350-
<FirstScene client:only step="stepThree" />
353+
<FirstScene client:only step="stepThree" />
351354
</div>
352355

353356
### Render another Cube
@@ -427,7 +430,7 @@ export class SceneGraph {}
427430
and now we have 2 cubes that have their own states, and react to events independently.
428431

429432
<div class="h-96 w-full border border-dashed border-accent-500 rounded">
430-
<FirstScene client:only step="stepFour" />
433+
<FirstScene client:only step="stepFour" />
431434
</div>
432435

433436
## Lighting
@@ -503,7 +506,7 @@ export class Cube {
503506
Our cubes look better now, with dimensionality, showing that they are 3D objects.
504507

505508
<div class="h-96 w-full border border-dashed border-accent-500 rounded">
506-
<FirstScene client:only step="stepFive" />
509+
<FirstScene client:only step="stepFive" />
507510
</div>
508511

509512
## Bonus: Take control of the camera
@@ -561,7 +564,7 @@ With Angular Three, we use `NgtArgs` structural directive to pass _Constructor A
561564
To access the `camera` and `glDomElement`, we use `injectStore` to access the state of the canvas.
562565

563566
<div class="h-96 w-full border border-dashed border-accent-500 rounded">
564-
<FirstScene client:only step="stepSix" />
567+
<FirstScene client:only step="stepSix" />
565568
</div>
566569

567570
And that concludes our guide. We have learned how to create a basic scene, add some lights, and make our cubes interactive.

‎package.json

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@
1616
},
1717
"private": true,
1818
"devDependencies": {
19-
"@analogjs/platform": "^1.3.0",
20-
"@analogjs/vite-plugin-angular": "1.6.1",
19+
"@analogjs/platform": "^1.6.4-beta.1",
20+
"@analogjs/vite-plugin-angular": "^1.6.4-beta.1",
2121
"@angular-devkit/build-angular": "18.1.1",
2222
"@angular-devkit/core": "18.1.1",
2323
"@angular-devkit/schematics": "18.1.1",
@@ -104,8 +104,8 @@
104104
"vitest": "1.6.0"
105105
},
106106
"dependencies": {
107-
"@analogjs/content": "1.6.1",
108-
"@analogjs/router": "1.6.1",
107+
"@analogjs/content": "^1.6.4-beta.1",
108+
"@analogjs/router": "^1.6.4-beta.1",
109109
"@angular/animations": "18.1.0",
110110
"@angular/common": "18.1.0",
111111
"@angular/compiler": "18.1.0",

0 commit comments

Comments
 (0)