Sciter Reactor это в принципе ReactJS но имплементрванный нативно. В версии 4.4.0.0


Реально же Reactor это три сущности:

1. SSX — он же facebook::JSX но с представительницами древней профессии).

Это вот

function LookupField() {
  return 
   <div.lookup>
     <input|text />
     <button>do</button>
   </div>;
}

есть валидная конструкция теперь поддерживаемая Sciter Script. SSX имплементирована нативно.
SSX генерирует VirtualDOM литералы — tuples в терминах Sciter.


2. Element.merge(vdom) — он же facebook::ReactDOM.render(vdom).

merge() это опять же native имплементация patch (а.к.а. reconciliation) алгоритма используемого в ReactJS, Mithril и других virtual DOMers.

Ну и

3. Reactor.Component класс который полностью вот он:

namespace Reactor 
{
  class Component : Element
  {
    function update(newdata) {
      assert this.data !== newdata; 
      if(this.data) this.data.extend(newdata); else this.data = newdata;
      function update() { this.merge(this.render()); }
      this.post(update,true);
    }
  }
}

И эти три штуки и есть всё что нужно для ReactJS функциональности в Sciter.

Документация: https://sciter.com/developers/sciter-docs/reactor-and-ssx/

Привет, сейчас реакт дрейфует в сторону хуков(useState, useEffect и т.п), что-то подобное планируется?
я так понял, внутри SSX скрипт нельзя использовать?
можно ли прокидывать SSX как пропсы?
как в sciter'e сейчас будет выглядеть что-то подобное:

const UploadWrapper: FunctionComponent<IUploadButtonProps> = ({
  className,
  children,
  onChange,
  multiple,
  disabled,
}) => (
  <label className={className}>
    <input
      type="file"
      hidden={true}
      multiple={multiple}
      disabled={disabled}
      onChange={(e: ChangeEvent<HTMLInputElement>) => {
        if (e.target.files) onChange(e.target.files);
        e.target.value = '';
      }}
    />
    {children}
  </label>
);

const buttonCSS = css`
  background-color: ${color('grey200')};
  font-family: ${fontFamily};
  font-size: 13px;
  ...
`;

const progressButtonCSS = css<IProgressButtonProps>`
  ${buttonCSS}
  ${({ hasError }) =>
    hasError
      ? css`
          background-color: ${color('lightPink')};
        `
      : ''}
  ${({ progress, hasError }) =>
    css`
      transition-duration: ${progress === 0 ? '0s' : '0.2s'};
      background-size: ${hasError ? 0 : progress}% 100%;
    `};
`;

const progressPixelYellow =
  'background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8f9bwPwAHzgL+xyJi5AAAAABJRU5ErkJggg==);';

export const UploadButton = styled(UploadWrapper)`
  span {
    line-height: 72px;
  }
  ${progressPixelYellow}
  ${progressButtonCSS}
`;

Здравствуйте, cgibin, Вы писали:


C>Привет, сейчас реакт дрейфует в сторону хуков(useState, useEffect и т.п), что-то подобное планируется?
C>я так понял, внутри SSX скрипт нельзя использовать?

Можно. Но для генерации контента только.
Для событий есть event handlers в скрипте.

Писать script внутри markup это ересь которую осудили все ведущие собаководы давным давно.

C>как в sciter'e сейчас будет выглядеть что-то подобное:

Так вот

class UploadWrapper : Reactor.Component {

  const styleset = ["upload", $url(components.css)]; // CSS declaration

  function this(params,children) {
    this.extend(params);
    this.children = children;
  }

  function render() {
    return 
      <label class={this.className}>
        <input|file
          hidden={true}
          multiple={this.multiple}
          :disabled={this.disabled} />
        {this.children}
      </label>;
  }

  event change $(input|file) (evt,fileInput) {
    var fileName = fileInput.value;
    if(this.onchange)
      this.onchange(fileName)
  }
}

C>можно ли прокидывать SSX как пропсы?

Да.

  <UploadWrapper onchange={(filename) => … }>
    <p>Choose file</p>
  </UploadWrapper>

Тут <p>Choose file</p> попадет в function this(params,children) как children коллекция.

Здравствуйте, c-smile, Вы писали:

CS>Писать script внутри markup это ересь которую осудили все ведущие собаководы давным давно.

Сейчас собаководы рекомендуют писать markup внутри script.

Здравствуйте, wildwind, Вы писали:

W>Здравствуйте, c-smile, Вы писали:

CS>>Писать script внутри markup это ересь которую осудили все ведущие собаководы давным давно.

W>Сейчас собаководы рекомендуют писать markup внутри script.

Есть component и есть его usage в HTML.

Если в коде component можно и имеет смысл задавать служебный markup, то вот usage должен быть быть описан в чистом HTML я так думаю.
Проблема React в том что там весь markup нужно задавать в JS а это неправильно.

Я вообще хотел что-то замутить на тему специального синтаксиса для компонентов:

class MyComponent: Sciter.Component {

@css: {
  style declarations for default layout and structure go here
  (CSS syntax)
}

@render: 
  <markup>…</markup>
  (HTML syntax) 

@code: 
  (script syntax)  

  event click $(someselector) {...}

  function someMethod() {...}

}

Представляется что иметь один файл в котором описывается все ипостаси компонента это удобно.

Думаю вот про то.

CS>Если в коде component можно и имеет смысл задавать служебный markup, то вот usage должен быть быть описан в чистом HTML я так думаю.

Понятно, что что-то сложное писать внутри разметки дурное занятие, но что-то вроде такого

const Boo: FunctionComponent<IProps> = ({
  hasError,
  items
}) => (
  <>
    <Content>
      {items.map(item => <Item ...item />)}
    </Content>
    {hasError && <ErrorMessage />}    
  </>
);

используется постоянно
Кстати, для SSX должен быть едиственный root тег?

По поводу синтаксиса — я вот сейчас смотрю в сторону https://svelte.dev/examples , хочется в чём-нибудь попробовать. Там несколько другой подход — не рантайм манипуляции с виртуалдомом, а компилятор для этого хозяйства, что развязывает руки и в плане синтаксиса тоже

Здравствуйте, cgibin, Вы писали:

C>По поводу синтаксиса — я вот сейчас смотрю в сторону https://svelte.dev/examples , хочется в чём-нибудь попробовать. Там несколько другой подход — не рантайм манипуляции с виртуалдомом, а компилятор для этого хозяйства, что развязывает руки и в плане синтаксиса тоже

Вот так (<reactor> это встроенный mounting point для HTML — примерно то что делает svelte своим прекомпилятором):

<html>
    <head>
        <script type="text/tiscript">

var name = "World";

        </script>
    </head>
    <body>

       <reactor(div)>
         <h1>Hello {name}</h1>
       </reactor>

    </body>
</html>

CS>>Если в коде component можно и имеет смысл задавать служебный markup, то вот usage должен быть быть описан в чистом HTML я так думаю.

C>Понятно, что что-то сложное писать внутри разметки дурное занятие, но что-то вроде такого
C>используется постоянно

Генерирующий код не проблема:

<html>
    <head>
        <script type="text/tiscript">

var items = ["Veni","Vidi","Vici"];

        </script>
    </head>
    <body>

       <reactor(ol)>
         {items.map((item) => <li>{item}</li>)}
       </reactor>

    </body>
</html>

C>Кстати, для SSX должен быть едиственный root тег?

Да, но ничего не мешает использовать arrays

var contentElements = [];
for (var n in 10)
  contentElements.push( <li>{n}</li> );

elSome.content(contentElements);

или я что-то не понял.