Skip to content

Commit 4b72d04

Browse files
ricardo-devis-agulloricardo-devis-agullo
committed
remove angular references:
1 parent d5b21bc commit 4b72d04

File tree

3 files changed

+2
-141
lines changed

3 files changed

+2
-141
lines changed

‎website/docs/consumers/client-side-rendering.md

Lines changed: 0 additions & 139 deletions
Original file line numberDiff line numberDiff line change
@@ -38,145 +38,6 @@ This is how to integrate the component:
3838
9. An `oc:rendered` event is published containing the pointer to the component, and all the information (version, name, html, etc.)
3939
10. Back to 3) In order to render, in case, nested client-side components
4040

41-
## Framework Integration Examples
42-
43-
### React Integration
44-
45-
```jsx
46-
import React, { useEffect, useRef } from "react";
47-
48-
function OCComponent({ href, fallback = "Loading..." }) {
49-
const ref = useRef();
50-
51-
useEffect(() => {
52-
// Ensure OC client is loaded
53-
if (window.oc) {
54-
window.oc.renderNestedComponent(ref.current);
55-
}
56-
}, [href]);
57-
58-
return (
59-
<oc-component ref={ref} href={href}>
60-
{fallback}
61-
</oc-component>
62-
);
63-
}
64-
```
65-
66-
### Vue.js Integration
67-
68-
```vue
69-
<template>
70-
<oc-component :href="componentUrl" ref="ocComponent">
71-
{{ fallbackText }}
72-
</oc-component>
73-
</template>
74-
75-
<script>
76-
export default {
77-
props: ["componentUrl", "fallbackText"],
78-
mounted() {
79-
if (window.oc) {
80-
window.oc.renderNestedComponent(this.$refs.ocComponent);
81-
}
82-
},
83-
};
84-
</script>
85-
```
86-
87-
### Angular Integration
88-
89-
```typescript
90-
import { Component, ElementRef, Input, AfterViewInit } from "@angular/core";
91-
92-
@Component({
93-
selector: "oc-wrapper",
94-
template: `
95-
<oc-component [attr.href]="href" #ocElement>
96-
{{ fallback }}
97-
</oc-component>
98-
`,
99-
})
100-
export class OCWrapperComponent implements AfterViewInit {
101-
@Input() href: string;
102-
@Input() fallback: string = "Loading...";
103-
104-
constructor(private elementRef: ElementRef) {}
105-
106-
ngAfterViewInit() {
107-
if ((window as any).oc) {
108-
(window as any).oc.renderNestedComponent(
109-
this.elementRef.nativeElement.querySelector("oc-component")
110-
);
111-
}
112-
}
113-
}
114-
```
115-
116-
## Performance Optimization
117-
118-
### Lazy Loading Components
119-
120-
```javascript
121-
// Load components only when needed
122-
function loadComponentWhenVisible(element) {
123-
const observer = new IntersectionObserver((entries) => {
124-
entries.forEach((entry) => {
125-
if (entry.isIntersecting) {
126-
window.oc.renderNestedComponent(entry.target);
127-
observer.unobserve(entry.target);
128-
}
129-
});
130-
});
131-
132-
observer.observe(element);
133-
}
134-
135-
// Apply to all oc-components
136-
document
137-
.querySelectorAll("oc-component[data-lazy]")
138-
.forEach(loadComponentWhenVisible);
139-
```
140-
141-
### Caching Strategies
142-
143-
```javascript
144-
// Configure client-side caching
145-
window.oc.conf = {
146-
cache: {
147-
enabled: true,
148-
maxAge: 300000, // 5 minutes
149-
maxEntries: 100,
150-
},
151-
};
152-
```
153-
154-
## Error Handling
155-
156-
### Graceful Degradation
157-
158-
```html
159-
<oc-component href="//registry.com/unreliable-component">
160-
<div class="fallback-content">
161-
<h3>Content temporarily unavailable</h3>
162-
<p>Please try refreshing the page.</p>
163-
</div>
164-
</oc-component>
165-
```
166-
167-
### JavaScript Error Handling
168-
169-
```javascript
170-
// Listen for component errors
171-
document.addEventListener("oc:error", function (event) {
172-
console.error("Component failed to load:", event.detail);
173-
174-
// Show fallback content or retry
175-
const component = event.target;
176-
component.innerHTML = '<div class="error">Component failed to load</div>';
177-
});
178-
```
179-
18041
## What can I do in the client-side?
18142

18243
Look at this page: [advanced client-side operations](rendering-lifecycle)

‎website/docs/intro.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ A component is a directory composed by
5959
| File | Description |
6060
| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
6161
| `package` | The component definition, dependencies, and more. |
62-
| `view` | The view in charge to output the final markup. OC uses `ES6` templates by default and comes with a powerful template system to support components built with any javascript UI framework like `React`, `Angular`, `Vue`. Legacy `Handlebars` and `Jade` templates are still supported for backwards compatibility. |
62+
| `view` | The view in charge to output the final markup. OC uses `ES6` templates by default and comes with a powerful template system to support components built with any javascript UI framework like `React`, `SolidJS`, `Vue`. Legacy `Handlebars` and `Jade` templates are still supported for backwards compatibility. |
6363
| `server` (optional) | If the component need logic, including consuming services, this is the entity that will produce the view-model to compile the view. |
6464
| static assets (optional) | Images, Javascript, and files to be uploaded to the CDN and referenced in the HTML markup. |
6565
| \* | Any other files that will be useful for the development such as tests, docs, etc. |

‎website/src/components/HomepageFeatures.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ const FeatureList: FeatureItem[] = [
3535
description: (
3636
<>
3737
<p>
38-
<strong>Use any frontend technology</strong> - React, Vue, Angular, or
38+
<strong>Use any frontend technology</strong> - React, Vue, SolidJS, or
3939
vanilla JavaScript. The template system handles the complexity of
4040
supporting multiple frameworks, so teams can choose the best tool for
4141
their needs without being locked into a single technology stack.

0 commit comments

Comments
 (0)