Code Monkey home page Code Monkey logo

sciter-js-sdk's Introduction

NOTE: sciter-js-sdk is moved to https://gitlab.com/c-smile/sciter-js-sdk/

Build cross platform desktop applications with HTML, CSS and javascript.

Script

Sciter.JS uses QuickJS in particular QuickJS++.

  • ES6: async/await, classes, modules, destructuring;
  • BigInt, BigFloat, BigDecimal - arbitrary precision IEEE 754 floating point operations and transcendental functions with exact rounding (currency, etc);
  • Node.JS runtime (more or less full) is coming;

Platforms

  • Windows - i32, i64 and arm64 - published;
  • Linux - i64, arm32 (Raspberry Pi) - published;
  • MacOS - i64 and arm64 - published;
  • Mobiles - pending;

Demos

Calc demo (universal: Browser and Sciter)

Windows:

Browser and Sciter

Linux (Raspbian on Raspberry Pi in particular)

Linux on Raspberry Pi

MacOS:

Path: samples/calc

Browser and Sciter shows the same HTML document.

To run demo start run-calculator-browser.bat or run-calculator-sciter.bat. The later will start bin.win/x32/scapp.exe - standalone Sciter engine.

Mithril demo (universal: Browser and Sciter)

Path: samples/mithril

Sciter.JS runs mithril as it is. Only basic use cases are thested so far though.

sciter-js-sdk's People

Contributors

4silvertooth avatar 8ctopus avatar alecharing avatar benrogmans avatar bilyaka avatar c-smile avatar geocine avatar jelmansouri avatar maherfa avatar miaourt avatar mustafahi avatar prid13 avatar renhiyama avatar valentiworklearning avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

sciter-js-sdk's Issues

Error: address already in use (related to named pipe)

What we need?
A cross platform approach to clean resources related to named pipes.

Some usecases for named pipes:

  • Forcing a single instance for app. Any other lauched instances should notify the first one and quit immediately (e.g: app.requestSingleInstanceLock() from electron)
  • Named pipe "inspector-js" is used to establish communication between the inspector and apps (sciter-sdk-js/demos/inspector/res/server.js).

The problems:

  • Failing to close listening to a named pipe (server) is preventing the next run for app to listen to it again. I already faced this with the inspector (this won't happen all the time) and I had to delete /tmp/inspector-js to avoid restarting my computer.
  • The current implementation of the inspector is using a hard coded name for pipe. The problem isn't with this, but with allowing more useless instances to start.

My recommendations for the inspector: either, force a single instance, or allow other instances to start with different names for pipes.

A work around for failures in closing a pipe: don't start by binding a server to named pipe, but start by connecting as client:

  • Connected as client:
    • Try to notify the other instance, then quit.
  • Failed to connect as client:
    • Error: connection refused:
      • we need a cross platform approach to clean the resources related to pipe. In linux, we could achieve it with rm /tmp/inspector-js.
      • try to bind as server.
    • Error: no such file or directory:
      • try to bind as server.

RTL content not rendered correctly under Linux

RTL directions and languages are rendered correctly under Windows but not under Linux(LMDE4). Affected targets are styled with background-color: pink;

Windows: Windows7 x64
Screenshot-WIN7

Linux: LMDE4 x64
Screenshot-LMDE4

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sciter: Test Direction</title>
    <style>
        body {
            margin: 5px 80px;
        }
        b {
            font-size: 14px;
        }
        div {
            margin-bottom: 4px;
            font-size: 18px;
            background-color: #e0e0e0;
            border-bottom: solid 1px #bbb;
        }

    </style>
</head>

<body>
    <b>LTR</b>
    <div>English</div>
    <div style="text-align: right;">English: right aligned</div>
    <br>

    <b>LTR Language | RTL direction:</b>
    <div style="background-color: pink;" dir="rtl">English: right aligned</div>
    <div style="background-color: pink; direction: rtl;">English: direction: rtl</div>
    <br>

    <b>RTL Language | RT direction:</b>
    <div class="arabic" style="background-color: pink;">اللغة العربية</div>
    <br>

    <b>RTL Language with RTL direction</b>
    <div class="arabic" style="background-color: pink;" dir="rtl">اللغة العربية</div>
    <div class="arabic" style="background-color: pink; direction: rtl;">اللغة العربية</div>

    <script>
        // Window.this.move(0, 0, 550, 350)
    </script>
</body>
</html>

import keyword doesn't work properly

Not sure if this is related to #12 , but import * as sys from '@sys' currently fails with the console error SyntaxError: expecting '('. The same goes for other importing modules, including individual variables/methods from those modules (sciter, env, etc.).

I can get import to work using the promise syntax, const syspromise = import('@sys'), and then finding the methods I need in the results of that promise, so it just seems to be an issue with import as a keyword.

tiscript view equivalent

Cannot find a way to call function from another language (pysciter) with window and I cannot find any tiscript view equivalent.

Will it be implemented later or is it already implemented ?

image

window not defined

this is my console log:
error:script: ReferenceError: 'window' is not defined

no window object
is it Window?
please add window object

no source code

include source code instead of binaries
include binaries in releases

CSS Flex Masonery layout

How can we achieve, with sciter flex, such a layout? (masonery layout) Whith my example, in CSS3, in the browser we can see this:

image

But it is seen like this in sciter-js scapp.exe:

image

`




`

`.container {
display: flex;
flex-flow: column wrap;
align-content: space-between;
/* Your container needs a fixed height, and it

  • needs to be taller than your tallest column. */
    height: 760px;

/* Optional */
background-color: #f7f7f7;
border-radius: 3px;
padding: 20px;
width: 60%;
margin: 40px auto;
counter-reset: items;
}

.item {
width: 19%;
/* Optional */
position: relative;
margin-bottom: 2%;
border-radius: 3px;
background-color: #a1cbfa;
border: 1px solid #4290e2;
box-shadow: 0 2px 2px rgba(0,90,250,0.05),
0 4px 4px rgba(0,90,250,0.05),
0 8px 8px rgba(0,90,250,0.05),
0 16px 16px rgba(0,90,250,0.05);
color: #fff;
padding: 15px;
box-sizing: border-box;
}

div.item::before {
counter-increment: items;
content: counter(items);
}

/* Re-order items into 3 rows */
.item:nth-of-type(5n+1) { order: 1; }
.item:nth-of-type(5n+2) { order: 2; }
.item:nth-of-type(5n+3) { order: 3; }
.item:nth-of-type(5n+4) { order: 4; }
.item:nth-of-type(5n) { order: 5; }

/* Force new columns */
.break {
flex-basis: 100%;
width: 0;
border: 1px solid #ddd;
margin: 0;
content: "";
padding: 0;
}

body { font-family: sans-serif; }
h3 { text-align: center; }`

Toggling CSS class may not reflect the changes on screen for positions and dimensions

This really took too much time to understand, and recreate. Introducing a small change may break it in a different way, and sometimes I'm suspecting some other random factors. Introducing a transition to target element is killing the problems.

1. The First Problem:
Toggling a class is rarely reflecting the changes on screen for positions and dimensions. Introducing some user interaction events (mouse move, clicks, keyboard events, resizing window) may help to bring the updates on screen.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Issue1: toggling a class may not reflect changes for positions and dimensions</title>

    <style>
    	#box {
	    height: 100px; width: 100px;
            border: solid 5px black;
            background-color: red;
	    }

        #box.variant {
            background-color: green;

            /* enable at least one of these groups */

            /* group 1: change dimensions */
            height: 200px; width: 200px;

            /* group 2: change margin */
            /* margin: 50px; */

            /* group 3: change padding */
            /* padding: 50px; */
        }

        /* you may introduce a transition as a work around to fix this problem */
        #box {
            /* transition: width 1ms; */
        }
    </style>
</head>
<body style="margin: 50px;">

    <div id="box"></div>

    <script>
        let variant = false
        
        const box = document.querySelector('#box')

        setInterval(() => {
            variant = !variant
            console.log('variant:', variant)

            variant ? (box.classList.add('variant')) : (box.classList.remove('variant'))
        }, 400)
    </script>
</body>
</html>

2. The Second Problem:

  • For the second problem, we change style for background color and then we toggle a class without too much delay. You'll notice that the size isn't getting updated at all.
  • Wrapping the toggle for class in setTimeout will introduce another problem. You'll notice that you'll receive the updates but you still miss some of them, and the ones succeeding to reflect on screen may reflect the older state. Anyway, user interaction in this case may help to reflect the current state on screen.
  • Introducing a transition is confirmed to fix this problem
  • Swapping both lines is fixing this problem, but not sure if It can't miss.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Issue2: toggling class may not reflect changes for positions and dimensions</title>

    <style>
    	#box {
	    	height: 100px; width: 100px;
            border: solid 5px black;
	    }

        #box.variant {
            /* enable at least one of these groups */

            /* group 1: change dimensions */
            height: 200px; width: 200px;

            /* group 2: change margin */
            /* margin: 50px; */

            /* group 3: change padding */
            /* padding: 50px; */
        }

        /* you may introduce a transition as a work around to fix this problem */
        #box {
            /* transition: width 1ms; */
        }
    </style>
</head>
<body style="margin: 50px;">

    <div id="box"></div>

    <script>
        let color = ''
        let variant = false
        
        const box = document.querySelector('#box')

        setInterval(() => {
            color = (color === 'green') ? 'red' : 'green'
            variant = !variant
            console.log('variant:', variant, 'color:', color)

            // swaping these two lines may stop the problem, but not sure if some other random factors may still affect the swap
            // wrapping the second line in a setTimeout will only create a different problem
            box.style['background-color'] = color
            variant ? (box.classList.add('variant')) : (box.classList.remove('variant'))
        }, 400)
    </script>
</body>
</html>

Feature Request: Allow custom caption for Window.this.modal(JSX)

Window.this.modal(<info>Hello World!</info>);

The caption is info, but it would be nice to be able to customize it without having to resort to providing the entire HTML along with params object, for instance:

Window.this.modal(<info caption="test">Hello World!</info>);

Modals w/ 'url' param not working on macOS

If a modal is initialized with the 'url' param set, nothing will pop up but the main window will freeze up as though one is showing. It's almost as if the modal is invisible. This behavior can be recreated inside of uSciter using the 'msgbox+dialog' sample.

Dialog.Glitch.Demo.mov

element.removeChild doesn't update..

<html>
<body>
<ul id="list">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
<p>Click the button to remove the first item from the list.</p>
<button>Test</button>
<script>
  const testBtn = document.querySelector('button');

  testBtn.addEventListener('click', () => {
    var list = document.getElementById("list");
    console.log('before',list.innerHTML, list.firstElementChild.innerHTML);
    list.removeChild(list.firstElementChild);
    console.log('after',list.innerHTML);
  });
</script>
</body>
</html>

Check the test in browser and Sciter.

Vertical loss of mouse interaction after css transform

When using css transform, vertical interaction is getting lost for regions not overlapping with the space occupied without the transformation applied.

  • This is affecting elements with position: inline-block;
  • Relative elements aren't affected.
  • Absolute elements are having a different kind of bug by shrinking the bounding box horizontally (regardless of transform)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Transform</title>

    <style>
        #target {
            display: inline-block;
            padding: 10px;
            border: solid 1px black;
            background-color: rgba(0, 255, 0, 0.4);
            cursor: pointer;
        }
        #target:hover {
            background-color: rgba(255, 69, 0, 0.8);;
        }
        #target {
            /* un-comment to test with translate */
            /* transform: translate(25px, 25px); */

            /* un-comment to test with scale */
            /* transform: scale(3.0); */

            /* un-comment to test with rotation */
            /* transform: rotate(70deg); */
        }
        #target {
            /* un-comment to fix vertical mouse interation */
            /* position: relative; */

            /* un-commnet to see a different bug that shrinks the bounding box horizontally */
            /* position: absolute; */
        }
    </style>
</head>
<body style="padding: 100px 150px;">
    <div id="target">TARGET</div>

    <script>
        const target = document.querySelector('#target')
        target.addEventListener('click', () => {
            console.log('target clicked.')
        })
    </script>

</body>
</html>

self.intrinsicWidthMax self.intrinsicHeight

Is there a Sciter.JS equivalent? It's the only way I know how to center the window and also fit it to its contents, in TIScript:

function self.ready() {
  const w = self.intrinsicWidthMax();
  const h = self.intrinsicHeight();
  const (sw, sh) = view.screenBox(#frame, #dimension);
  view.move((sw / 2) - (w / 2), (sh / 2) - (h / 2), w, h, true);
}

Linux: Execution locks at 'await fetch(url)'

The fetch example never worked since it was added to the Linux version of sciter.js. The execution always locks at await fetch(url). but it runs successfully under Windows.

Note: I didn't test with arm32

React example

If you have react example with webpack / npm support, it will be easy sell to my team.

css: box-sizing issues.

<html>
<head>
  <style>
  button[id='test'], input[id='test']{
    box-sizing: border-box;
    height: 3em;
  }
  button, input{
    height: 3em;
  }
  </style>
  <title>TEST BORDER-BOX</title>
</head>
<body>
  <button #test>BUTTON ALWAYS A BIT SHORT</button><br/>
  <input #test>baseline mismatch</input><br/>
  <button>BUTTON NOT SHORT</button><br/>
  <input>baseline good</input><br/>
</body>
</html>

The css glitch I had earlier was due to box-sizing. Button with border-box is always a little short of text content.

TypeError: not a function (sciter.launch)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script type="module">
        import * as sciter from "@sciter";

        document.ready = function() {
            sciter.launch("https://github.com/veluxa/sciterjs-react") // Error 
        }

        console.log(sciter.VERSION); // Work
    </script>
</head>

<body>
    <div id="root"></div>
</body>

</html>

Behavior:virtual-list bugs?

# 1

When adding a new item to the virtual-list and scrolling down(using vlist.lastElementChild.scrollIntoView()) immediately,
the item is added at an incorrect location.

149645a805324eae0.gif

# 2

When changes (delete/replace) occur in virtual-list items, scroll bars are not rendered correctly.

2f9595f994b4c0f1a.gif

# 3

Certain virtual-list item is rendered multiple times intermittently. (see Test Message 500)

3c895a3cde22b838d.gif

Sample project used for the above test is here.
vlist-test-sample.zip

Issues in mdview

I was playing around with the sample to compile to html using pandoc, and came across these issues

File watching

At

it should be Settings.saveState()

Rendering images

Any images added as ![alt-text](./relative/link) do not resolve correctly, and a checkered board is shown(presumably the default image). I'm reasonably sure that this is the same issue as the next one.

Following local links

Links added as [link text](local/file/path.md) are not resolved as a file://but rather as a this://, which leads the app to ask the os to handle it. While I'm not sure if this is an error in sciter or in my implementation, shouldn't this happen by itself? How do I fix this?

Linux: stroking svg path is breaking subsequent content

This problem started with 4.4.5.4-8302 (linux)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>issue: svg path stroke is breaking subsequent content</title>
</head>
<body>
    <!-- visible -->
    <div>Content Before SVG</div>

    <!-- <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"></svg> -->
    <svg width="200" height="200">
        <!-- the first circle is visible -->
        <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />

        <!-- The problem here is with stroke, not stroke-width -->
        <path d="M 50 50 H 110 V 110 H 50 L 50 50 Z"
              fill="green"
              stroke="red"
              stroke-width="5"/>

        <!-- problem: the second circle isn't visible -->
        <circle cx="150" cy="150" r="40" stroke="green" stroke-width="4" fill="yellow" />
    </svg>

    <!-- problem: not visible -->
    <div>Content After SVG</div>

</body>
</html>

Notes to svelte users:

  • document.createElementNS is used by svelte to create svg elements at runtime.
  • you may need to replace return document.createElementNS('http://www.w3.org/2000/svg', name); with return document.createElement(name);

(Question) Building lite variant for raspberry pi

What are the steps to build the lite variant for raspberry pi, as there is no a main lite executable that we can just pass an html to, in order to test, right?

(Moreover, I would be interested in building or spawning the whole thing, wrapped with pysciter, as you know I am a fan of python :) ). I don't know if just building with pysciter, and changing/loading the .so file for the lite one would be enough, or are there other steps involved or to consider?

Thanks in advance,

Binaries for Sciter Lite on Linux

Hi,

First of all, thank you for your efforts, having JS support in Sciter will greatly help with IDE support.
It's probably not a high priority right now, but is there an ETA for the release of SciLite Linux binaries?

Thanks!

console.log fails with const object = { __proto__: null }

@c-smile Thanks for this link rollup/rollup#3140. I understand that they're sticking to the deprecated __proto__ for performance reasons to avoid changing object's prototype after it's creation (it's supported by browsers and some other runtimes including quickjs)

And according to this rollup/rollup#3096, __proto__: null is used to set the prototype of namespace objects to null.

quickjs has __proto__ according to these links:

What I discovered:

  • The Error only fires when using console.log(object_with__proto__null)
  • The Error won't fire when using __proto__: undefined (not tested with browsers)
  • You can access the object and assign it, but the moment you console.log the second reference, you'll receive the same error.
  • You can console.log object's properties and Object.keys(object).
  • The error has nothing to do with Object.freeze

Test Code:

const obj = {
    __proto__: null,
    a: 10,
    b: 20
};

obj; // Ok

obj.a = 11; // Ok
console.log('obj.a:', obj.a); // Ok: property changed to 11

Object.defineProperty(obj, 'a', { value: 12 });
console.log('obj.a:', obj.a); // Ok: property changed to 12

console.log('keys:', Object.keys(obj)); // Ok: not a problem at all

console.log('obj:', obj); // error
console.log(obj); // the same error
// error message:
// terminate called after throwing an instance of 'qjs::exception'
// Aborted (core dumped)

const obj_2 = obj; // Ok
console.log(obj_2); // The same error because it's refering to the same object

const obj_3 = { ...obj }; // Ok
console.log(obj_3); // Ok

Fix element.insertBefore(node, refNode) to accept falsy second parmeter

Likely other methods are affected by not tested (e.g: element.insertAfter(node, refNode))
https://github.com/c-smile/sciter-js-sdk/blob/main/status.md

I managed to run a build generated by a svelte project after applying some fixes:

Svelte Project

npx degit sveltejs/template my-svelte-project
cd my-svelte-project

Open rollup.config.js and uncomment terser plugin (this should help tracking some errors from terminal)

// production && terser(),

Build the project and execute sciter. you also need to fix paths (styles, scripts, etc..) in index.html by removing the leading forward slash

npm run build
scapp ./public/index.html

Reported Error:

error:script: TypeError: Node was deleted

After some checks, I discovered that sciter is claiming about invoking the second parameter (reNode) with a 'null' value.

element.insertBefore(node, null) // Accepted by chrome but not sciter
element.insertBefore(node)       // Accepted by sciter but not chrome

I tried to fix Node.prototype.insertBefore but the moment I write Node.prototype, I get this error:

console.log(Node.prototype)

Reported Error:

terminate called after throwing an instance of 'qjs::exception'
Aborted (core dumped)
npm ERR! code ELIFECYCLE
npm ERR! errno 134
npm ERR! [email protected] sciter: scapp ./public/index.html
npm ERR! Exit status 134
npm ERR!
npm ERR! Failed at the [email protected] sciter script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

But I managed to apply a temporary fix either by using @rollup/plugin-replace or by invoking some code before executing the script

Method 1 (@rollup/plugin-replace):

// rollup.config.js
replace({
    include: ['node_modules/svelte/internal/**'],
    delimiters: ['', ''],
    'target.insertBefore(node, anchor || null);': 'let sciter_detected = false; try { navigator } catch { sciter_detected = true } ; (!anchor && sciter_detected) ? target.insertBefore(node) : target.insertBefore(node, anchor || null);',
}),

Method 2 (replacing insertBefore for document.body and any other element created at runtime):

// at the top of src/main.js, add these lines
let sciter_detected = false; try { navigator; } catch { sciter_detected = true; }
if (sciter_detected) {
	document.body.__insertBefore = document.body.insertBefore
	document.body.insertBefore = function (node, anchor) {
		const params = [node, ...(anchor ? [anchor] : [])]
		document.body.__insertBefore(...params)
	}

	document.__createElement = document.createElement
	document.createElement = function (...rest) {
		const element = document.__createElement(...rest)
		element.__insertBefore = element.insertBefore
		element.insertBefore = function (node, anchor) {
			const params = [node, ...(anchor ? [anchor] : [])]
			element.__insertBefore(...params)
		}
		return element
	}
}

Sorry for the long text, I only tried to prove to others the possibility to benefit from some wide spread reactive frameworks

Can't change element styles from JavaScript

I'm trying to implement the 7GUIs benchmarks with SciterJS, but I've run into the problem that I can't seem to change the style.

In this code I'm trying to make the input background color red:

'use strict';

const inputs = [...document.querySelectorAll('input[type=text]')];
const [inputStart, inputReturn] = inputs;

inputs.forEach((input) => {
  input.addEventListener('change', () => {
    const [day, month, year] = input.value.split('.');
    const date = new Date(year, month, day);
  
    if (date == 'Invalid Date') {
      // trying to change background color to red

      //input.style.backgroundColor = 'red'; // cannot set property 'backgroundColor' of undefined
      //input.classList.add('invalid'); // cannot read property 'add' of undefined
      //input.setAttribute('style', 'background-color: red'); // not a function
    } else {

    }
  });
});

I don't understand why .setAttribute isn't working since it's marked as implemented here.

I also tried input.className = 'date invalid' but I get the error that there isn't a setter for this property.

Is it possible to modify an element's styles in JavaScript using SciterJS yet?

[BUG] Zindex wrong rendering order

As you can see the options of the top component are blocked by the bottom component and the zindex rendering order is not correct

cap

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>

    <div style="
            flow: horizontal;
            position: relative;
            width: 300;"
        >
        <div>word:</div>
        <div style="width: *;margin-left:10px;">
            <input type="text" style="width: *;">
            <ul style="
                background-color: red;
                position: absolute;
                top:30px;
                left: 40px;
                right: 0;
                border:1px solid #f2f2f2;
                z-index:99"
            >
                <li>a</li>
                <li>b</li>
                <li>c</li>
                <li>d</li>
            </ul>
        </div>
    </div>
    <div style="position: relative;width: 300px;padding: 10px 0;z-index: 10;">

        <div style="
            border:1px solid #f2f2f2;
            padding: 10px;
            background-color: rgba(0,0,0,0.4);"
        >
            <button>A</button>
            <button>B</button>
        </div>
        <div style="
            position: absolute;
            top: 0;
            left:10px;
            z-index: 10;"
        >
            group
        </div>

    </div>

</body>

</html>

Problems with attributes: tested with "disabled", "readonly", and "placeholder"

The problems:

  • element.attributes and element.hasAttribute are not defined.
  • disabled elements are enabled.
  • readonly elements are editable.
  • placeholder not showing.
  • element.setAttribute is succeeding with disabled and readonly but not with placeholder.
  • element.state.target_attr_name = true fails.
  • element.state.target_attr_name = false is removing the attribute, but you won't be able to apply it again.

Why no sciter.dll?

I don't think it's possible to use native code with scapp.exe so I am wondering where sciter.dll is.

PyScitter Compatibility Issue

When using Sciter.JS with PySciter, I've noticed two problems but I'm having trouble finding a fix for them.

First Issue

Error messages don't show the error text -- it just shows up as [object]:

error:tis: [object]
error:tis:     at sciter:debug-peer.js:0
error:tis: [object]
error:tis: [object]
error:tis:     at file:///Users/alecharing/Desktop/Python%20Projects/sciter_testing/files/scripts/main.js:0
error:tis: [object]

I'm thinking it's a type conversion issue when passing the error between languages?
Also (assuming this is related), console.log triggers an error when debugging is enabled:

info:tis: TypeError: not a function,
,    at run (sciter:debug-peer.js:341)

Second Issue

Scripts on the first page load are not called. Let's say for example I have two pages: test_1.html and test_2.html.

test_1.html

<html>
    <head>
        <title>Test 1</title>
        <script>
          console.log("Hello from Test 1!");
        </script>
    </head>
    <body>
      <a href="test_2.html">Test 2</a>
    </body>
</html>

test_2.html

<html>
    <head>
        <title>Test 2</title>
        <script>
          console.log("Hello from Test 2!");
        </script>
    </head>
    <body>
      <a href="test_1.html">Test 1</a>
    </body>
</html>

If in Python I run:

if __name__ == '__main__':
    frame = gui.Frame(debug=False)
    frame.load_file('files/test_1.html')
    frame.run_app()

and then click the "Test 2" link to go to the second file and then the "Test 1" link to go back to the first file, this is the output:

[object]
    at file:///Users/alecharing/Desktop/Python%20Projects/sciter_testing/files/test_1.html:4
[object]
Hello from Test 2!
Hello from Test 1!

Why wasn't the "Hello from Test 1!" output twice? Once before the "Hello from Test 2!" and once after. I'm assuming it has something to do with the error thrown when the first page loads for the first time.

Thanks!

(Question) about video streaming in sciter-js

Is video rendering supported? I am trying to load in scapp.exe the simplest of the video-examples (with no TISSCRIPT) but it does not render the vídeo. Is there anything that must be done differently? ( Checked and the URL is ok and loads in a browser)

test-video-streaming.htm

Thanks in advance.

`

<title>Test</title>
<style>

      video {
        background: gray;
        size: *;
      }

    </style>
    <script type="text/tiscript"></script>
</head>
<body>

  Streaming from http://clips.vorwaerts-gmbh.de/VfE_html5.mp4 

  <video src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" sizing=contain />
  

</body>
`

behavior `htmlarea` not working after 4.4.6.4

Seems that the htmlarea behavior is no longer working after updating to Sciter.JS v4.4.6.4.

Tested version(s):

  • 4.4.6.4
  • 4.4.6.5
  • 4.4.6.6

Tested platform(s):

  • Windows

Basic Example:

div
{
    behavior: htmlarea;
}
<div><span>Hello:</span>&nbsp;<span style="font-weight: bold;">Sciter</span></div>

Expected behaviour is that the text/content within the div can be selected with the mouse.

How to pollyfill document.dispatchEvent?

I am playing around converting a simple svelte project to sciter.js, svelte heavily depends on createEvent and dispatchEvent for reactivity. I am pollyfilling createEvent like this.

Element.prototype.createEvent = function(name) {
  const evt = new Event(name);
  return evt;
}

Event.prototype.initCustomEvent = function(type, canBubble, cancelable, detail){
  this.type = type;
  this.bubbles = canBubble;
  this.cancelable = cancelable;
  this.detail = detail;
  //return this;
}

but how do I pollyfill document.dispatchEvent?

how to make a http request,such as fetch

I am a web developer,I had use sciter for a longtime,I'm glad to see this project,and the quickjs did not provide http request api,will sciter.js provide fetch api such as chrome did?

Event: undefined KeyboardEvent values.

<html lang="en">
<head>
	<meta charset='utf-8'>
</head>
<body>
  <input placeholder="Enter some text" name="name"/>
  <script>

    const input = document.querySelector('input');
    input.addEventListener('keydown', checkValue);
    input.addEventListener('keyup', checkValue);
    input.addEventListener('keypress', checkValue);

    function checkValue(e) {
      console.log(e.type, e.key, e.keyCode);
    }
  </script>  
</body>
</html>

The value of e.key or e.keyCode for the test above is undefined, when we press any key in the input.

js userAgent load fail

error:script: TypeError: cannot read property 'userAgent' of undefined
error:script: at (this://app/js/vue.js:532)
at (this://app/js/vue.js:8)
at (this://app/js/vue.js:11964)

Doesn't work with CodeMirror

I tried it with the CodeMirror javascript library for code editors, and it doesn't work. You can search github for that project, there's CodeMirror and CodeMirror.next.

In other browsers that editor even works from files without needing a web server.

Sometimes you can see an editor pane draw for a fraction of a second before disappearing.

After reading someone with a problem displaying a page, I tried the HTMLX sample on CodeMirror.

That takes it from: no editor appears
to: Editor appears. Text coloring doesn't work. Layout is totally wrong, it seems to be missing CSS. Arabic text (from a mixed direction test) - the chunks are in the wrong order visually and the cursor moves in the wrong direction. Radio buttons aren't working.

I only tested a couple files.

I tried making the javascript and css inline and it was worse. Maybe I need to take all of those out.

import {$,on} from "Sciter" fails.

Check the sqlite db sample, it fails to load with this error.

warning:DOM: failed to load "/sciter-js-sdk/samples/sqlite/Sciter" file, error=2

CSS/HTML5 coverage

Hi c-smile,

Very nice project I hope it takes off here as well,

Is there some document/place where we can see how much CSS is covered already?

Thabks.

Sciter/Scapp builds not available for linux arm32

Scapp is very useful for rapid prototyping and simple applications, but the only linux build available is for linux x64. I'm working on a raspberry pi application and would really appreciate a build of scapp for that.

Problems with click events

LMDE4 and Windows 7:

  • click isn't generated for many elements (tested to fail with div, span, input[type=text], and input[type=password].
  • dblclick is generated after the second mousedown, not after the second mouseup.
  • contextmenu is generated after mouseup, not after mousedown (Not sure if this what's planned for sciter).

LMDE4:

  • contextmenu is generated twice.
  • The third mousedown for triple click is generated twice (div, span, button, checkbox, radio)

Windows 7:

  • The third mouseup for triple click is generated twice (input[type=text], input[type=password])
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>issue: problems with click events</title>

    <style>
        button, div, span {
            position: relative;
            display: inline-block;
            padding: 20px;
            background-color: #ccc;
        }
    </style>
</head>
<body>
    <!-- un-comment exactly one target for testing -->

    <div id="target">target</div>
    <!-- <span id="target">target</span> -->
    <!-- <input id="target" type="text"> -->
    <!-- <input id="target" type="password"> -->

    <!-- <button id="target">target</button> -->
    <!-- <input id="target" type="radio"> -->
    <!-- <input id="target" type="checkbox"> -->
    
    <script>
        const target = document.querySelector('#target')

        // click event isn't generated for many elements
        //     tested to fail with div, span, input[type=text], input[type=password]
        target.addEventListener('click', () => { console.log('target: click') })

        // dblclick is generated after the second mouse down,
        //     not after the second mouseup
        target.addEventListener('dblclick', () => { console.log('target: dblclick') })
        
        // contextmenu event is generated twice (linux) after mouseup (win + linux),
        //     not once after mousedown (not sure if this what's planned for sciter)
        target.addEventListener('contextmenu', (evt) => { console.log('target: contextmenu'); evt.preventDefault(); })

        target.addEventListener('mousedown', () => { console.log('target: mousedown') })
        target.addEventListener('mouseup', () => { console.log('target: mouseup') })
        target.addEventListener('mouseenter', () => { console.log('target: mouseenter') })
        target.addEventListener('mouseleave', () => { console.log('target: mouseleave') })
    </script>
</body>
</html>

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.