Vlad Sabev vdsabev

## reactive.js
const useReactive = (object, dependencies = []) => {
  const [_, setState] = useState(0);
  return useMemo(
    () => toReactive(object, () => setState((state) => state + 1)),
    dependencies
  );
};

const toReactive = (object, callback) => {
  if (!object || typeof object !== 'object') return object;

## lob-scripting.html
<!DOCTYPE html>
<html>
  <head>
    <title>LoB Scripting</title>
  </head>

  <body>
    <template id="hello">
      <h1></h1>
      <select>

## css-scope-inline.js
// Original: https://github.com/gnat/css-scope-inline
// Modified: https://gist.github.com/Gyanreyer/a9d5fe8b91055ea4dc302c1d0ff17452
(() => {
  let cssScopeCount = 0;
  const scopedSelectorRegex = new RegExp('(:scope)(?![A-Za-z0-9_-])', 'g');

  /** @returns {Node[]} */
  const getAllChildNodes = (/** @type {NodeList} */ childNodes) =>
    [...childNodes].flatMap((childNode) => [
      childNode,

## mutagen.html
<!DOCTYPE html>
<html>
  <head>
    <script src="/mutagen.js"></script>
  </head>

  <body>
    <mg-component src="/profile.html" data='{ "user": { "name": "John Doe", "pictureUrl": "https://placehold.co/128" } }' />
  </body>
</html>

## 04-component-fixed-tests.js
describe('Counter', () => {
  ...

  it('should emit value incremented by step', async () => {
    await component.setProps({ step: 10 });
    component.vm.increment();
    expect(component.emitted('input')).toEqual([[10]]);
  });

  it('should emit value decremented by step', async () => {

## 07-component-reliable-tests.js
import { mount } from '@vue/test-utils';
import Counter from './Counter';

describe('Counter', () => {
  let component;
  beforeEach(() => {
    component = mount(Counter);
  });

  it('should emit value set to a specific number', async () => {

## 05-component-set-value.vue
<template>
  <div>
    <button type="button" @click="decrement">-</button>
    <input type="text" :value="value" @input="setValue" /> <!-- we removed the argument here -->
    <button type="button" @click="increment">+</button>
  </div>
</template>

## 06-component-accessible.vue
<template>
  <div>
    <button type="button" @click="decrement" aria-label="Decrement">-</button>
    <input type="text" :value="value" @input="setValue($event.target.value)" />
    <button type="button" @click="increment" aria-label="Increment">+</button>
  </div>
</template>

## 03-component-refactored.vue
<template>
  <div>
    <button type="button" @click="decrement">-</button> <!-- we removed the argument here -->
    <input type="text" :value="value" @input="setValue($event.target.value)" />
    <button type="button" @click="increment">+</button> <!-- we removed the argument here -->
  </div>
</template>

<script>
export default {

## 02-component-viemodel-tests.js
import { mount } from '@vue/test-utils';
import Counter from './Counter';

describe('Counter', () => {
  let component;
  beforeEach(() => {
    component = mount(Counter);
  });

  it('should emit value set to a specific number', () => {
	const useReactive = (object, dependencies = []) => {
	const [_, setState] = useState(0);
	return useMemo(
	() => toReactive(object, () => setState((state) => state + 1)),
	dependencies
	);
	};

	const toReactive = (object, callback) => {
	if (!object \|\| typeof object !== 'object') return object;
	<!DOCTYPE html>
	<html>
	<head>
	<title>LoB Scripting</title>
	</head>

	<body>
	<template id="hello">
	<h1></h1>
	<select>
	// Original: https://github.com/gnat/css-scope-inline
	// Modified: https://gist.github.com/Gyanreyer/a9d5fe8b91055ea4dc302c1d0ff17452
	(() => {
	let cssScopeCount = 0;
	const scopedSelectorRegex = new RegExp('(:scope)(?![A-Za-z0-9_-])', 'g');

	/** @returns {Node[]} */
	const getAllChildNodes = (/** @type {NodeList} */ childNodes) =>
	[...childNodes].flatMap((childNode) => [
	childNode,
	describe('Counter', () => {
	...

	it('should emit value incremented by step', async () => {
	await component.setProps({ step: 10 });
	component.vm.increment();
	expect(component.emitted('input')).toEqual([[10]]);
	});

	it('should emit value decremented by step', async () => {
	import { mount } from '@vue/test-utils';
	import Counter from './Counter';

	describe('Counter', () => {
	let component;
	beforeEach(() => {
	component = mount(Counter);
	});

	it('should emit value set to a specific number', async () => {
	<template>
	<div>
	<button type="button" @click="decrement">-</button>
	<input type="text" :value="value" @input="setValue" /> <!-- we removed the argument here -->
	<button type="button" @click="increment">+</button>
	</div>
	</template>