Merge

README.md

@@ -3,7 +3,7 @@
 This repository demonstrates some essential concept of the [UIX](https://uix.unyt.org) framework such as [Realm Imports](https://unyt.org/glossary#realm-import) and [Web components](https://unyt.org/glossary#web-components) using the example of a **website screenshot app**.
 
 
-The repository includes persistent file storage and implements [front-end](https://unyt.org/glossary#back-end).
+The repository includes persistent file storage and implements [front-end](https://unyt.org/glossary#front-end).
 
 ## Installation
 1. Install the **UIX command line tool** following the [Getting Started](https://docs.unyt.org/manual/uix/getting-started#the-uix-command-line-tool) guide in our documentation.
@@ -29,9 +29,9 @@ We split our code base in [back-end](https://unyt.org/glossary#back-end), [front
  │ ├── .dx // Config file for deployment
  │ └── entrypoint.tsx // Back-end entrypoint
  ├── common/
- │ ├── compoments/
- │ │ ├── MainPage.scss // Main style declaration
- │ │ └── MainPage.tsx // Main component
+ │ └── compoments/
+ │   ├── MainPage.scss // Main style declaration
+ │   └── MainPage.tsx // Main component
  ├── frontend/
  │ ├── entrypoint.css // Front-end style declaration
  │ └── entrypoint.tsx // Front-end entrypoint

app.dx

@@ -1,10 +1,10 @@
 name: "Website Screenshot Example",
-icon_path: "https://cdn.unyt.org/unyt-resources/logos/unyt/square-dark-background.png";
+icon: "https://cdn.unyt.org/unyt-resources/logos/unyt/square-dark-background.png";
 
 plugin git_deploy (
  prod: (
  on: 'push'
  branch: '*',
  test: false
  )
-)
+)

backend/Capture.ts

@@ -17,7 +17,7 @@ export default class Capture {
  });
  const result = await page.screenshot({
  fullPage
- }) as Buffer;
+ }) as Uint8Array;
  await browser.close();
  return result;
  }

backend/entrypoint.tsx

@@ -6,6 +6,7 @@ import { FileProvider } from "uix/html/entrypoint-providers.tsx";
 import { UIX } from "uix";
 
 @endpoint export class Screenshot {
+
  @timeout(40_000)
  @property static async take(url: string | URL, config?: {
  width: number,
@@ -28,7 +29,7 @@ import { UIX } from "uix";
  return this.getImage(filePath);
  }
 
- static getImage(filePath: Path<`${string}:`, boolean>) {
+ private static getImage(filePath: Path<`${string}:`, boolean>) {
  return <img src={'/image/'.concat(filePath.name)}/> as HTMLImageElement;
  }
 }

common/components/MainPage.tsx

@@ -1,14 +1,23 @@
 import { Screenshot } from 'backend/entrypoint.tsx';
+<<<<<<< HEAD
 import { Component } from 'uix/components/Component.ts';
 import { template } from "uix/html/template.ts";
+=======
+import { Path } from "uix/utils/path.ts";
+>>>>>>> 5dfac4a376ab451c65e9ee901620d641006c2cb6
 
 @template(function(this: MainPage) {
  return <div>
  <h1>UIX Screenshot <b>App</b></h1>
  <span>Get a screenshot of any given URL.</span>
 
+<<<<<<< HEAD
  <input id="url" value="https://example.com" type={"url"} placeholder={"Enter URL here..."}/>
  <div id="submit" onclick:frontend={()=>this.capture()} class="submit active">Capture</div>
+=======
+ <input id="url" value="https://example.com" type="url" placeholder="Enter URL here..."/>
+ <div id="submit" onclick={()=>this.capture()} class="submit active">Capture</div>
+>>>>>>> 5dfac4a376ab451c65e9ee901620d641006c2cb6
 
  <p>Screenshot</p>
  <div id="images"/>
@@ -32,12 +41,13 @@ export class MainPage extends Component {
  try {
  const image = await Screenshot.take(url);
  this.images.prepend(image);
- } catch (error) {
+ } 
+ catch (error) {
  console.error(error);
  alert("Oups, could not create screenshot!");
- } finally {
-  this.submit.classList.toggle("active", true);
-  this.url.disabled = false;
- }
+ } 
+
+ this.submit.classList.toggle("active", true);
+ this.url.disabled = false;
  }
 }

deno.json

@@ -1,6 +1,5 @@
 {
- "_publicImportMap": "./importmap.json",
- "importMap": "./.datex-cache/importmap.lock.json",
+ "importMap": "./importmap.json",
  "compilerOptions": {
  "jsx": "react-jsx",
  "jsxImportSource": "uix",