### Install WebF Dependency

Source: https://openwebf.com/docs/tutorials/getting-started/quick-start

Add the WebF dependency to your pubspec.yaml file and run `flutter pub get` to install it.

```yaml
dependencies:
  webf: ^0.16.0
```

--------------------------------

### Install Vue CLI

Source: https://openwebf.com/docs/tutorials/getting-started/quick-start

Install the Vue CLI globally using npm to create and manage Vue.js applications.

```bash
npm install -g @vue/cli
```

--------------------------------

### Vue.js Project Setup and Serve

Source: https://openwebf.com/docs/tutorials/guides-for-web-developer/web-frameworks-support

Commands to create a new Vue.js project using vue-cli and start the development server.

```bash
vue init vueapp

```

```bash
npm run serve

```

--------------------------------

### Create and Run Vue App

Source: https://openwebf.com/docs/tutorials/getting-started/quick-start

Create a new Vue app, navigate into its directory, and start the development server.

```bash
vue create app
cd app
npm run serve
```

--------------------------------

### React.js Project Creation and Start

Source: https://openwebf.com/docs/tutorials/guides-for-web-developer/web-frameworks-support

Commands to create a new React.js project using create-react-app and start the development server.

```bash
npx create-react-app my-app

```

```bash
cd my-app

```

```bash
npm start

```

--------------------------------

### Getting Help with WebF

Source: https://openwebf.com/docs/tutorials/getting-started/introduction

Resources for getting help with WebF development include a community Discord server for advice, the GitHub issue tracker for bugs, and direct contact for contribution inquiries.

```APIDOC
Getting help
Are you getting stuck anywhere? Here are a few links to places to look:
  1. If you need help developing your app, our community Discord server is a great place to receive advice from other WebF app developers.
  2. If you suspect you're encountering a bug with the WebF, please check the GitHub issue tracker to see if any existing issues that match your problem. If not, feel free to fill out our bug report template and submit a new issue.
  3. If you want to become a contributor of WebF, please contact andycall via discord directly.
```

--------------------------------

### Basic Flutter Widget Setup

Source: https://openwebf.com/docs/tutorials/guides-for-flutter-developer/webf_controller

Demonstrates how to integrate the WebF widget into a Flutter application's UI. This example shows a simple Scaffold with an AppBar and the WebF widget in the body, controlled by a WebFController.

```Dart
@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('WebF Demo'),
    ),
    body: Center(
      child: WebF(controller: controller),
    ),
  );
}
```

--------------------------------

### WebF XMLHttpRequest (XHR) GET Request

Source: https://openwebf.com/docs/tutorials/guides-for-web-developer/fetch_and_xhr

Provides a step-by-step guide to making an asynchronous GET request using the XMLHttpRequest (XHR) API in WebF, including setting up the request and handling the response.

```JavaScript
var xhr =newXMLHttpRequest();
xhr.open('GET','https://api.example.com/data',true);
xhr.onreadystatechange=function(){
if(xhr.readyState===4&& xhr.status===200){
var response =JSON.parse(xhr.responseText);
console.log(response);
}
};
xhr.send();
```

--------------------------------

### Basic HTML Structure Example

Source: https://openwebf.com/docs/tutorials/guides-for-web-developer/dom-and-selector

A simple example demonstrating how to set the inner HTML of the document body.

```javascript
document.body.innerHTML=`<div>helloworld</div>`;
```

--------------------------------

### Initialize WebF WebSocket Plugin

Source: https://openwebf.com/docs/tutorials/getting-started/quick-start

Initialize the WebFWebSocket plugin before initializing the Flutter framework.

```dart
void main() {
  runApp(MyApp());
}
```

--------------------------------

### WebF Flexbox Layout Example

Source: https://openwebf.com/docs/tutorials/guides-for-web-developer/css_support/flex_layout

Provides a practical CSS example demonstrating how to configure a flex container and its items for a common layout scenario, including distribution and alignment.

```CSS
.container{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.item{
  flex:1;/* shorthand for flex-grow: 1, flex-shrink: 1, flex-basis: 0% */
}

```

--------------------------------

### Initialize WebF Widget with Controller

Source: https://openwebf.com/docs/tutorials/getting-started/quick-start

Shows how to use the WebF widget as the entry point for web apps in Flutter, passing the initialized WebFController as a parameter.

```dart
class WebFDemo extends StatelessWidget{
  final WebFController controller;

  WebFDemo({ required this.controller });

@override
Widget build(BuildContext context){
return Scaffold(
        appBar: AppBar(
          title: Text('WebF Demo'),
),
        body: Center(
          child: WebF(controller: controller),
));
}
}
```

--------------------------------

### Import WebF Libraries in Dart

Source: https://openwebf.com/docs/tutorials/getting-started/quick-start

Import the necessary WebF libraries in your Dart code for integration.

```dart
import 'package:webf/webf.dart';
import 'package:webf/devtools.dart';
```

--------------------------------

### JavaScript DOM Manipulation Example

Source: https://openwebf.com/docs/tutorials/guides-for-web-developer/dom-and-selector

A basic JavaScript example demonstrating how to create a new DOM element and append it to the document body using WebF's Node API.

```javascript
const div =document.createElement('div');  
document.body.appendChild(div);  
```

--------------------------------

### Initialize WebFController in StatefulWidget

Source: https://openwebf.com/docs/tutorials/getting-started/quick-start

Demonstrates initializing the WebFController within the `didChangeDependencies` callback of a StatefulWidget. It also shows how to preload resources and dispose of the controller to prevent memory leaks.

```dart
class FirstPageState extends State<FirstPage>{
  late WebFController controller;

@override
void didChangeDependencies(){
super.didChangeDependencies();
    controller = WebFController(
      context,
      devToolsService: ChromeDevToolsService(),
);
    controller.preload(WebFBundle.fromUrl('http://<yourip>:8080/')); // The page entry point
}

@override
void dispose(){
super.dispose();
    controller.dispose();
}

@override
Widget build(BuildContext context){
return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
),
      body: Center(
        child: ElevatedButton(
          onPressed:(){
Navigator.push(context, MaterialPageRoute(builder:(context){
return WebFDemo(title:'SecondPage', controller: controller);
}));
},
          child: const Text('Open WebF Page'),
),
),
);
}
}
```

```dart
@override
void dispose(){
super.dispose();
  controller.dispose();
}
```

--------------------------------

### Sticky Positioned Layout Example

Source: https://openwebf.com/docs/tutorials/guides-for-web-developer/css_support/positioning

Provides an example of 'position: sticky', explaining its hybrid nature between relative and fixed positioning. It highlights how sticky elements toggle based on scroll position and stick to viewport edges.

```CSS
.sticky-header{
  position: sticky;
  top:0;
  background-color:#333;
  color:white;
  padding:10px;
  z-index:100;
}
```

--------------------------------

### MutationObserver Basic Usage Example

Source: https://openwebf.com/docs/tutorials/guides-for-web-developer/mutation_observer

Demonstrates how to create a MutationObserver instance and use the observe() method with a target element and an options object to monitor DOM changes.

```javascript
const observer = new MutationObserver(() => {
  console.log("callback that runs when observer is triggered");
});

observer.observe(document.querySelector("#element-to-observe"), {
  subtree: true,
  childList: true,
});
```

--------------------------------

### WebF Box Model CSS Example

Source: https://openwebf.com/docs/tutorials/guides-for-web-developer/css_support/the_box_model

Demonstrates the CSS Box Model with 'box-sizing: border-box' applied to a div element. This example illustrates how padding and border are included within the element's defined width and height.

```CSS
div{
  width:300px;
  height:150px;
  padding:10px;
  border:5px solid black;
  box-sizing: border-box;
  
}
```

--------------------------------

### CSS Transitions Example

Source: https://openwebf.com/docs/tutorials/guides-for-web-developer/css_support/transition_and_animations

Demonstrates a CSS transition for the background-color property of an element. When the element is clicked, its background color changes smoothly over 0.3 seconds.

```CSS
.box{
width:100px;
height:100px;
background-color:blue;
transition: background-color 0.3s ease-in-out;
}
```

```JavaScript
const box =document.querySelector('.box');
box.onclick=()=> box.style.backgroundColor='red';
```

--------------------------------

### CSS Functional Notations

Source: https://openwebf.com/docs/tutorials/guides-for-web-developer/css_support/value_and_units

Provides examples of using functional notations like calc() for calculations and linear-gradient() for background effects.

```CSS
div{
  width:calc(100%-20px);
  background:linear-gradient(red,blue);
}
```

--------------------------------

### WebF Flexbox Container Basics

Source: https://openwebf.com/docs/tutorials/guides-for-web-developer/css_support/flex_layout

Demonstrates the fundamental CSS to enable Flexbox layout on a container element in WebF. This is the starting point for using Flexbox.

```CSS
.container{
  display: flex;
}

```

--------------------------------

### WebF CSS Relative Positioning Example

Source: https://openwebf.com/docs/tutorials/guides-for-web-developer/css_support/positioning

Demonstrates how to use 'position: relative' in CSS to offset an element from its normal position. It highlights that the element still reserves its original space in the layout and can utilize z-index for stacking.

```css
.relative-box{
  position: relative;
  top:10px;
  left:20px;
}
```

--------------------------------

### WebF Preload Mode Example

Source: https://openwebf.com/docs/tutorials/performance_optimization/prerendering_and_preload_mode

Demonstrates how to use the WebFController to preload a web bundle before mounting the WebF widget. This method optimizes loading time by fetching and preparing resources in advance.

```Dart
controller =WebFController(  
  context,  
);
controller.preload(WebFBundle.fromUrl('assets:assets/bundle.html'));  

```

--------------------------------

### Drag and Drop Animation Example

Source: https://openwebf.com/docs/tutorials/guides-for-web-developer/interactive_animations

Demonstrates a drag-and-drop interaction where a circle element follows the user's touch or mouse cursor. This example highlights WebF's real-time animation capabilities.

```HTML
<div class="circle"></div>
```

```CSS
.circle{
width:50px;
height:50px;
background-color:blue;
border-radius:50%;
position: absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
```

```JavaScript
const circle =document.querySelector('.circle');

// Function to update circle position
functionupdatePosition(event){
let x, y;

// Check if event is touch or mouse
if(event.touches){
        x = event.touches[0].clientX;
        y = event.touches[0].clientY;
}else{
        x = event.clientX;
        y = event.clientY;
}

    circle.style.left= x +'px';
    circle.style.top= y +'px';
}

document.addEventListener('touchmove',(e)=>{
updatePosition(e);
});
```

--------------------------------

### Vue.js Router Link Example

Source: https://openwebf.com/docs/enterprise/hybird_routing

An optimized example using Vue.js to demonstrate the `<webf-router-link>` component for navigation. It includes conditional rendering based on the active router and handles mount events.

```Vue.js
<template>
  <webf-router-link path="/register" @mount="handleRouterMounted('register')">
    <div v-if="activeRouter === 'register'">This is the Register page</div>
  </webf-router-link>
  <webf-router-link path="/login" @mount="handleRouterMounted('login')">
    <div v-if="activeRouter === 'login'">This is the Login page</div>
  </webf-router-link>
  <webf-router-link path="/home">
    <div>This is the Home page</div>
  </webf-router-link>
</template>

<script>
export default {
  data() {
    return {
      activeRouter: '',
    };
  },
  methods: {
    handleRouterMounted(page) {
      this.activeRouter = page;
    },
  },
};
</script>
```

--------------------------------

### WebF EventTarget API Example

Source: https://openwebf.com/docs/tutorials/guides-for-web-developer/dom-and-selector

Demonstrates how to use EventTarget.addEventListener and EventTarget.dispatchEvent in WebF. This allows for handling user interactions by registering listeners for specified event types.

```javascript
document.body.addEventListener('click',()=>{
  console.log('Clicked!');
});
const clickEvent =newMouseEvent('click');
document.body.dispatchEvent(clickEvent);
```

--------------------------------

### WebF Canvas Element Setup

Source: https://openwebf.com/docs/tutorials/guides-for-web-developer/canvas_support

Demonstrates how to create an HTML canvas element in WebF for drawing. The canvas element defines the drawing surface with specified width and height.

```HTML
<canvas id="myCanvas" width="400" height="200"></canvas>
```

--------------------------------

### Load Remote Resources via HTTP/HTTPS

Source: https://openwebf.com/docs/tutorials/guides-for-flutter-developer/loading-web-contents-from-disk

Demonstrates how to preload remote resources using the http and https protocols with the WebFController. This is the standard method for fetching resources like web browsers.

```dart
controller = WebFController(
  context,
);
controller.preload(WebFBundle.fromUrl('https://xxx.com/demo.html'));
```

--------------------------------

### WebF HTML Structure for Absolute Positioning

Source: https://openwebf.com/docs/tutorials/guides-for-web-developer/css_support/positioning

Provides the HTML structure to demonstrate absolute positioning, showing a parent div with relative positioning and a child div with absolute positioning.

```html
<div class="relative">This div element has position: relative;
<div class="absolute">This div element has position: absolute;</div>
</div>
```

--------------------------------

### WebF Fetch API Basic Usage

Source: https://openwebf.com/docs/tutorials/guides-for-web-developer/fetch_and_xhr

Demonstrates a basic GET request using the Fetch API in WebF to retrieve data and parse it as JSON. Includes error handling for network issues.

```JavaScript
fetch('https://api.example.com/data')
.then(response=> response.json())
.then(data=>console.log(data))
.catch(error=>console.error('Error fetching data:', error));
```

--------------------------------

### CSS Cascade Example

Source: https://openwebf.com/docs/tutorials/guides-for-web-developer/css_support/cascade_inheritance

Illustrates CSS cascade rules, showing how specificity and declaration order determine the final applied style for an element.

```CSS
/* This has lower specificity */  
div{
color:blue;
}
  
/* This has higher specificity because it targets an ID */  
#myDiv{
color:red;
}
  
/* This comes later and would override previous styles with equal specificity */  
div{
color:green;
}

```

--------------------------------

### Load Bundled Resources via Assets Protocol

Source: https://openwebf.com/docs/tutorials/guides-for-flutter-developer/loading-web-contents-from-disk

Explains how to load resources that are bundled with Flutter assets using the assets:// protocol. This is useful for including local assets within your Flutter application.

```dart
controller = WebFController(
  context,
);
controller.preload(WebFBundle.fromUrl('assets:///assets/bundle.html'));
```

--------------------------------

### WebF MutationObserver Example

Source: https://openwebf.com/docs/tutorials/guides-for-web-developer/mutation_observer

Demonstrates how to use the MutationObserver to watch for attribute, child list, and subtree modifications on a target DOM node. It includes setting up the observer, defining a callback function to handle mutations, and disconnecting the observer.

```JavaScript
const targetNode = document.getElementById("some-id");
const config = {attributes: true, childList: true, subtree: true};
const callback = (mutationList, observer) => {
  for (const mutation of mutationList) {
    if (mutation.type === "childList") {
      console.log("A child node has been added or removed.");
    } else if (mutation.type === "attributes") {
      console.log(`The ${mutation.attributeName} attribute was modified.`);
    }
  }
};
const observer = new MutationObserver(callback);
observer.observe(targetNode, config);
observer.disconnect();
```

--------------------------------

### Fixed Positioned Layout Example

Source: https://openwebf.com/docs/tutorials/guides-for-web-developer/css_support/positioning

Demonstrates how to use 'position: fixed' to create elements that remain in the same position relative to the viewport, regardless of scrolling. It also touches upon the 'z-index' property for stacking order.

```CSS
.fixed-element{
  position: fixed;
  top:10px;
  right:15px;
}
```

--------------------------------

### Access Custom Element Properties in Vue.js

Source: https://openwebf.com/docs/enterprise/flutter_widget_element

Provides an example of how Vue.js developers can access custom element properties defined in Dart. It uses the `ref()` function to get the DOM instance and then accesses the 'src' property.

```vue
<template>
  <video-player
      ref="videoPlayer"
  ></video-player>
</template>
<script>
  export default {
    name: 'App',
    mounted() {
      console.log(this.$refs['videoPlayer'].src); // Outputs: [VIDEO SRC]
    }
  }
</script>
```

--------------------------------

### WebF Bundle Initialization

Source: https://openwebf.com/docs/tutorials/guides-for-web-developer/web-frameworks-support

Demonstrates how to initialize the WebF bundle by specifying the entry point URL for a web application.

```dart
WebF(bundle:WebFBundle.fromUrl('http://localhost:8080/index.html'),// The page entry point  
```

--------------------------------

### WebF Introduction and Capabilities

Source: https://openwebf.com/docs/tutorials/getting-started/introduction

WebF allows building Flutter apps with HTML, CSS, and JavaScript, leveraging web frameworks and offering a faster alternative to WebViews. It provides access to Flutter capabilities for web developers.

```APIDOC
What is WebF?
WebF is a Flutter package that enables developers to build their Flutter apps using HTML/CSS and JavaScript in one code base and deploy to mobile and desktop platforms.
It offers a subset of browser capabilities, including HTML, CSS, and a JavaScript runtime environment with built-in DOM, Window, Document, and other APIs defined in W3C/WhatWG standards.
This allows developers to utilize popular web frameworks, libraries, and other utilities to build apps compatible with both WebF and web browsers.
By embedding an optimized QuickJS engine, which is 40% faster than offical version. WebF can reduce loading time by 50% compared to WebView.
All Flutter capabilities and its ecosystem are fully accessible to web developers. This makes it possible for them to embed a native performance video player or a 3D game engine into the web without experiencing the performance loss associated with WebAssembly or WebGL in WebView.
```

--------------------------------

### WebF CSS Absolute Positioning Example

Source: https://openwebf.com/docs/tutorials/guides-for-web-developer/css_support/positioning

Illustrates the use of 'position: absolute' in CSS for precise element placement relative to its nearest positioned ancestor. It explains that absolutely positioned elements are removed from the normal document flow and do not reserve space.

```css
div.relative{
  position: relative;
  width:400px;
  height:200px;
  border:3px solid #73AD21;
}

div.absolute{
  position: absolute;
  top:80px;
  right:0;
  width:200px;
  height:100px;
  border:3px solid #73AD21;
}
```

--------------------------------

### OpenWebF PreRendering Mode Initialization

Source: https://openwebf.com/docs/tutorials/performance_optimization/prerendering_and_preload_mode

Demonstrates how to initialize the WebFController and activate the pre-rendering mode with a specified bundle.

```dart
controller = WebFController(
  context,
);
controller.preRendering(WebFBundle.fromUrl('assets:assets/bundle.html'));

```

--------------------------------

### Load Local Resources via File Protocol

Source: https://openwebf.com/docs/tutorials/guides-for-flutter-developer/loading-web-contents-from-disk

Shows how to load resources from the local file system using the file:// protocol. This protocol grants access to any disk location with readable permissions on desktop and mobile platforms.

```dart
controller = WebFController(
  context,
);
controller.preload(WebFBundle.fromUrl('file:///data/demo/demo.html'));
```

--------------------------------

### WebF Documentation Structure

Source: https://openwebf.com/docs/tutorials/getting-started/introduction

The documentation is structured for two main developer audiences: Web Developers and Flutter/Client Developers. It also covers performance, best practices, resources, and contribution guidelines.

```APIDOC
What is in the docs?
There are two major kinds of developers who are expected to read this documentation -- Web developers and Flutter/client developers.
These docs are consists of the following different parts:
  1. Guide for Web Developers: An end-to-end guide on how to create your first WebF app using HTML/CSS and JavaScript.
  2. Guide for Flutter/Client Developers: An end-to-end guide on how to customize behavior and extend WebF's capabilities using Flutter.
  3. Performance & Optimizations: Crucial methods for measuring and improving the performance of WebF.
  4. Best Practices: Essential checklists to keep in mind when developing a WebF app.
  5. Resources: Design documents and an overview of the architecture.
  6. Contributing Guide: Instructions for developers who want to contribute to WebF.
```

--------------------------------

### WebF Architecture and JavaScript Execution

Source: https://openwebf.com/docs/tutorials/guides-for-flutter-developer/overview

WebF extends Flutter's rendering framework and integrates QuickJS via Dart's FFI for JavaScript execution. It supports Web APIs and Chrome DevTools Protocol for debugging.

```APIDOC
WebF Architecture:
  - Extends Flutter RenderObject for CSS Style layout and painting.
  - Implements DOM tree and CSS selectors.
  - Integrates QuickJS via Dart FFI for JavaScript execution.
  - Comprehensive Web API support without polyfills.
  - Debugging service compatible with Chrome DevTools Protocol.
```

--------------------------------

### CSS Inheritance Example

Source: https://openwebf.com/docs/tutorials/guides-for-web-developer/css_support/cascade_inheritance

Demonstrates CSS inheritance, where a style applied to a parent element is passed down to its child elements.

```CSS
div{
color:red;
}

```

--------------------------------

### Positioned Offset Properties

Source: https://openwebf.com/docs/tutorials/guides-for-web-developer/css_support/positioning

Explains the 'top', 'right', 'bottom', and 'left' properties used to define the offset of a positioned element from its containing block.

```CSS
/* Example usage */
position: absolute;
top: 10px;
left: 20px;
```

--------------------------------

### Preload Bundles for Performance

Source: https://openwebf.com/docs/tutorials/guides-for-flutter-developer/webf_controller

Demonstrates how to preload bundles, such as font files, to enhance performance for recurring resources by creating a WebFBundle and resolving/obtaining its data before initializing the controller.

```Dart
// In somewhere before WebFController created
WebFBundle preloadFont =WebFBundle.fromUrl('http://xxx.com/font.ttf');
await preloadFont.resolve();
await preloadFont.obtainData();

controller =WebFController(
  context,
  preloadedBundles:[preloadFont],
);
```

--------------------------------

### WebF Architecture Overview

Source: https://openwebf.com/docs/tutorials/resources/design_documents

Explains how WebF leverages Flutter's rendering pipeline and integrates web technologies like HTML, CSS, and JavaScript. It highlights the use of QuickJS for JavaScript execution and compatibility with web frameworks.

```APIDOC
WebF Architecture:
  - Built upon Flutter Foundation with an added Rendering layer for CSS layout (Flexbox, Flow, positioning).
  - Integrates HTML/CSS parsing, DOM tree construction, CSSOM building, and style cascading.
  - W3C standard compatibility for HTML/CSS, ensuring consistency with browser rendering (Chrome, Safari).
  - Supports Web Modules and Inspector for extensibility and debugging.
  - Incorporates QuickJS as the JavaScript Engine.
  - Integrates commonly used Web APIs and DOM APIs.
  - Enables running frontend frameworks (React, Vue) and ecosystem components without code modification.
```

--------------------------------

### CSS Element Sizing

Source: https://openwebf.com/docs/tutorials/guides-for-web-developer/css_support/sizing_items

Sets the width and height of a div element using pixels. This is a fundamental way to control the dimensions of an element on a webpage.

```css
div{
width:300px;
height:150px;
}
```

--------------------------------

### Abort XHR Request

Source: https://openwebf.com/docs/tutorials/guides-for-web-developer/fetch_and_xhr

Provides an example of how to cancel an ongoing XMLHttpRequest request using the abort method. This is useful for preventing requests that are no longer needed.

```JavaScript
xhr.abort();
```

--------------------------------

### Applying CSS via <link> Element

Source: https://openwebf.com/docs/tutorials/guides-for-web-developer/css_support/use_css

Demonstrates how to link an external CSS file (`style.css`) to an HTML document in WebF, allowing for modular CSS management. The example shows a basic CSS structure with variables and a class applied to a div.

```html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="container">
    Helloworld
</div>
</body>
</html>
```

```css
:root{
--main-bg-color:brown;
--main-width:25vw;
--size-ratio:2;
}

.container{
width:calc(var(--main-width)*var(--size-ratio));
height:30px;
margin:0 auto;
background:var(--main-bg-color);
}
```

--------------------------------

### WebF MutationObserver.observe()

Source: https://openwebf.com/docs/tutorials/guides-for-web-developer/mutation_observer

Details the MutationObserver.observe() method, which is used to configure the observer to start receiving notifications about DOM changes. It specifies the target node and the options for what mutations to observe.

```APIDOC
observe(target, options)

Parameters:
  target: A DOM Node (which may be an Element) within the DOM tree to watch for changes, or to be the root of a subtree of nodes to be watched.
  options: Configuration object specifying which mutations to observe.
```

--------------------------------

### HTML Image Display (Intrinsic Size)

Source: https://openwebf.com/docs/tutorials/guides-for-web-developer/css_support/sizing_items

Displays an image without specifying width or height, causing it to render at its natural, intrinsic pixel dimensions.

```html
<imgsrc="image.jpg"alt="Description">
```

--------------------------------

### CSS Min/Max Sizing

Source: https://openwebf.com/docs/tutorials/guides-for-web-developer/css_support/sizing_items

Defines minimum and maximum width and height constraints for a div element. This ensures the element remains responsive within a certain range.

```css
div{
min-width:200px;
max-width:600px;
min-height:100px;
max-height:400px;
}
```

--------------------------------

### Optimizing WebF Routing with Mount/Unmount Events

Source: https://openwebf.com/docs/enterprise/hybird_routing

Explains how to use `mount` and `unmount` events on `<webf-router-link />` to dynamically manage DOM nodes, improving loading performance by avoiding unnecessary initialization.

```JavaScript
// Example of using event listeners (conceptual)
const routerLink = document.querySelector('webf-router-link[path="/home"]');
routerLink.addEventListener('mount', () => {
  // Dynamically insert DOM nodes for the /home page
});
routerLink.addEventListener('unmount', () => {
  // Clean up DOM nodes for the /home page
});
```

--------------------------------

### Vanilla JavaScript DOM Manipulation

Source: https://openwebf.com/docs/tutorials/guides-for-web-developer/web-frameworks-support

A basic HTML and JavaScript example showing DOM manipulation, including adding text to a container when a button is clicked. This demonstrates WebF's support for vanilla JS and standard DOM APIs.

```html
<!doctypehtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<metahttp-equiv="X-UA-Compatible"content="ie=edge">
<title>Document</title>
<style>
.text-container{
margin:10px0;
}
</style>
</head>
<body>
<h1>helloworld</h1>
<divid="button">Click me to add more texts</div>
<divclass="text-container"></div>
</body>
<script>
const button =document.querySelector('#button');
  button.addEventListener('click',()=>{
const container =document.querySelector('.text-container');
    container.appendChild(document.createTextNode('TEXT'));
});
</script>
</html>

```

--------------------------------

### HTML Image Display (Specified Width and Height)

Source: https://openwebf.com/docs/tutorials/guides-for-web-developer/css_support/sizing_items

Displays an image with both width and height explicitly set, which may distort the image if the aspect ratio is not maintained.

```html
<imgsrc="image.jpg"alt="Description"style="width:250px;height:250px;">
```

--------------------------------

### CSS Lengths and Percentages

Source: https://openwebf.com/docs/tutorials/guides-for-web-developer/css_support/value_and_units

Illustrates how to use length units (px, rem) for margins and font sizes, and percentages for element sizing.

```CSS
p{
  margin:20px;
  font-size:1.5rem;
}

img{
  width:50%;
}
```

--------------------------------

### HTML Image Display (Specified Width)

Source: https://openwebf.com/docs/tutorials/guides-for-web-developer/css_support/sizing_items

Displays an image with a specified width, allowing the height to adjust automatically to maintain the image's aspect ratio.

```html
<imgsrc="image.jpg"alt="Description"style="width:250px;">
```

--------------------------------

### C++ Implementation of Web API Inheritance for JavaScript

Source: https://openwebf.com/docs/tutorials/resources/design_documents

Illustrates the C++ approach to establishing prototype chains for objects, enabling JavaScript to access inherited properties and methods. This involves using QuickJS APIs to adjust the prototype chain of C++ instantiated objects.

```C++
// Conceptual C++ code using QuickJS API (simplified)

#include <quickjs.h>
#include <memory>

// Assume JS_Context and JS_Value are defined by QuickJS

// Represents a C++ object that can be exposed to JavaScript
class CppObject {
public:
    virtual ~CppObject() = default;
    // Methods to be exposed
};

// Example: C++ implementation of EventTarget
class CppEventTarget : public CppObject {
public:
    void addEventListener(const std::string& type, void* listener) {
        // Implementation details...
    }
};

// Example: C++ implementation of Node inheriting from EventTarget
class CppNode : public CppEventTarget {
public:
    void appendChild(CppNode* child) {
        // Implementation details...
    }
};

// Function to create and expose a C++ object with prototype chain
JSValue exposeCppObject(JSContext* ctx, CppObject* cppObj, JSValue proto) {
    JSValue jsObj = JS_NewObject(ctx); // Create a new JavaScript object

    // Set the prototype of the JavaScript object
    JS_SetPrototype(ctx, jsObj, proto);

    // Bind C++ methods/properties to the JavaScript object
    // This would involve using QuickJS functions like JS_DefineProperty...
    // For example, binding addEventListener for CppEventTarget:
    if (auto eventTarget = dynamic_cast<CppEventTarget*>(cppObj)) {
        JS_DefinePropertyValueStr(ctx, jsObj, "addEventListener", 
            JS_NewCFunction(ctx, cppEventTarget_addEventListener, "addEventListener", 1), 
            JS_PROP_ENUMERABLE | JS_PROP_CONFIGURABLE);
    }

    // Similarly, bind methods for CppNode, etc.

    return jsObj;
}

// QuickJS C function wrapper for addEventListener
JSValue cppEventTarget_addEventListener(JSContext *ctx, JSValueConst this_val, int argc, JSValueConst *argv) {
    // Get the C++ object instance from 'this_val'
    // Parse arguments (type, listener)
    // Call the C++ method: cppEventTarget->addEventListener(type, listener);
    return JS_NULL;
}

// --- In your main initialization ---
/*
void initializeWebF(JSContext* ctx) {
    // Create prototype objects for each C++ class
    JSValue eventTargetProto = JS_NewObject(ctx); // Create JS prototype for EventTarget
    // Bind EventTarget methods to eventTargetProto

    JSValue nodeProto = JS_NewObject(ctx); // Create JS prototype for Node
    JS_SetPrototype(ctx, nodeProto, eventTargetProto); // Node inherits from EventTarget
    // Bind Node methods to nodeProto

    JSValue elementProto = JS_NewObject(ctx); // Create JS prototype for Element
    JS_SetPrototype(ctx, elementProto, nodeProto); // Element inherits from Node
    // Bind Element methods to elementProto

    // When creating a new Element instance in JS:
    // CppObject* newElement = new CppElement(...);
    // JSValue jsElement = exposeCppObject(ctx, newElement, elementProto);
}
*/

```

--------------------------------

### Set Initial Cookies for Requests

Source: https://openwebf.com/docs/tutorials/guides-for-flutter-developer/webf_controller

Shows how to set initial cookies for request headers using the initialCookies property, providing an example with a Cookie object created from a Set-Cookie value.

```Dart
controller =WebFController(
  context,
  initialCookies:[Cookie.fromSetCookieValue('name=value')],
);
```

--------------------------------

### HTML Structure for Inheritance Example

Source: https://openwebf.com/docs/tutorials/guides-for-web-developer/css_support/cascade_inheritance

Shows the HTML structure used to illustrate CSS inheritance, where a paragraph inside a div inherits the parent's text color.

```HTML
<div>  
    This text is red.  
<p>This paragraph text is also red because it inherits the color from the parent div.</p>  
</div>  

```

--------------------------------

### Get Computed CSS Styles

Source: https://openwebf.com/docs/tutorials/guides-for-web-developer/css_support/use_css

Shows how to retrieve the final, computed values of all CSS properties for an element using `window.getComputedStyle()`. This is useful for reading styles after they have been applied by stylesheets.

```html
<!DOCTYPEhtml>
<html>
<head>
<style>
:root{
--main-bg-color:brown;
--main-width:25vw;
--size-ratio:2;
}

.container{
width:calc(var(--main-width)*var(--size-ratio));
height:30px;
margin:0 auto;
background:var(--main-bg-color);
}

.big-container{
width:100px;
height:100px;
border:1px solid #000;
}
</style>
</head>
<body>
<divclass="container">
    Helloworld
</div>
<divid="result">
</div>
<script>
const container =document.querySelector('.container');
document.body.onclick=()=>{
const computedStyle =window.getComputedStyle(container);
const result =document.querySelector('#result');
        result.textContent=`The size of that box, width: ${computedStyle.width}; height: ${computedStyle.height}`;
}
</script>
</body>
</html>
```

--------------------------------

### setInterval and clearInterval

Source: https://openwebf.com/docs/tutorials/guides-for-web-developer/timers

Illustrates how to repeatedly execute a function at fixed intervals using setInterval and how to stop it using clearInterval.

```javascript
let count = 0;
const intervalID = setInterval(() => {
  count++;
  console.log(`This has run ${count} times`);
  if (count >= 5) {
    clearInterval(intervalID);
  }
}, 1000);
```