New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

react-jsbox

Package Overview
Dependencies
Maintainers
1
Versions
102
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-jsbox - npm Package Compare versions

Comparing version 1.2.0-beta to 1.2.1-beta

dist/react-jsbox.esm.js

117

package.json
{
"name": "react-jsbox",
"version": "1.2.0-beta",
"description": "A custom React renderer for writing JSBox apps in React.",
"keywords": [
"React",
"JSBox",
"react-jsbox",
"react-reconciler",
"custom-renderer"
],
"main": "dist/react-jsbox.js",
"module": "dist/react-jsbox.module.js",
"umd:main": "dist/react-jsbox.umd.js",
"source": "src/index.js",
"files": [
"src",
"dist"
],
"exports": {
".": {
"browser": "./dist/react-jsbox.module.js",
"umd": "./dist/react-jsbox.umd.js",
"import": "./dist/react-jsbox.mjs",
"require": "./dist/react-jsbox.js"
"name": "react-jsbox",
"version": "1.2.1-beta",
"description": "A custom React renderer for writing JSBox apps in React.",
"keywords": [
"React",
"JSBox",
"react-jsbox",
"react-reconciler",
"custom-renderer"
],
"main": "dist/react-jsbox.js",
"module": "dist/react-jsbox.esm.js",
"source": "src/index.js",
"files": [
"src",
"dist"
],
"scripts": {
"dev": "rollup -c -w",
"build": "rollup -c",
"format": "prettier --ignore-path .gitignore --single-quote --write src/**/*.{js,md}",
"prepublishOnly": "npm run build"
},
"./package.json": "./package.json",
"./": "./"
},
"scripts": {
"prepare": "run-s build",
"build": "npm-run-all --parallel build:*",
"build:core": "microbundle build --raw",
"build:core-min": "microbundle build --raw -f iife src/cjs.js -o dist/react-jsbox.min.js",
"dev": "microbundle watch --raw --format cjs",
"prepublishOnly": "npm run build"
},
"author": "Eva1ent",
"repository": "github:Nicify/react-jsbox",
"peerDependencies": {
"react": "^16.13.1",
"react-reconciler": "^0.25.1"
},
"devDependencies": {
"@babel/core": "^7.10.4",
"@babel/plugin-proposal-class-properties": "^7.10.4",
"@babel/plugin-transform-runtime": "^7.10.4",
"@babel/preset-env": "^7.10.4",
"@babel/preset-react": "^7.10.4",
"@babel/runtime": "^7.10.4",
"babel-eslint": "^10.1.0",
"babel-preset-minify": "^0.5.1",
"eslint": "^7.4.0",
"eslint-plugin-babel": "^5.3.1",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-jsbox": "^0.1.1",
"eslint-plugin-react-hooks": "^4.0.5",
"microbundle": "^0.12.2",
"npm-run-all": "^4.1.5",
"react": "^16.13.1"
},
"license": "MIT"
"author": "Eva1ent",
"repository": "github:Nicify/react-jsbox",
"dependencies": {
"react-reconciler": "^0.25.1"
},
"peerDependencies": {
"react": "^16.13.1"
},
"devDependencies": {
"@babel/core": "^7.10.4",
"@babel/plugin-proposal-class-properties": "^7.10.4",
"@babel/plugin-transform-runtime": "^7.10.4",
"@babel/preset-env": "^7.10.4",
"@babel/preset-react": "^7.10.4",
"@babel/runtime": "^7.10.4",
"babel-eslint": "^10.1.0",
"babel-preset-minify": "^0.5.1",
"eslint": "^7.4.0",
"eslint-plugin-babel": "^5.3.1",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-jsbox": "^0.1.1",
"eslint-plugin-react-hooks": "^4.0.5",
"prettier": "^2.0.5",
"react": "^16.13.1",
"rollup": "^2.18.2",
"rollup-plugin-babel": "^4.4.0",
"rollup-plugin-cleanup": "^3.1.1",
"rollup-plugin-commonjs": "^10.1.0",
"rollup-plugin-modify": "^3.0.0",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-progress": "^1.1.2",
"rollup-plugin-replace": "^2.2.0",
"rollup-plugin-terser": "^6.1.0"
},
"license": "MIT"
}

123

src/components/view.js

@@ -1,59 +0,86 @@

import {hasOwnProperty} from '../helper'
import { hasOwnProperty } from '../helper'
export default class View {
constructor(type, props) {
const {layout, events, animate} = props
this._element = $ui.create({
type,
props,
layout,
events
})
this._animate = animate
}
constructor(type, props) {
const { layout, events, animate } = props
this._element = $ui.create({
type,
props,
layout,
events
})
this._animate = animate
}
_element = null
_element = null
_animate = null
_animate = null
get element() {
return this._element
}
get element() {
return this._element
}
appendChild(child) {
this.element.add(child.element)
}
appendChild(child) {
this.element.add(child.element)
}
removeChild(child) {
child.element.remove()
}
removeChild(child) {
child.element.remove()
}
insertBefore(child, beforeChild) {
this.element.insertBelow(child.element, beforeChild.element)
}
insertBefore(child, beforeChild) {
this.element.insertBelow(child.element, beforeChild.element)
}
update(updatePayload) {
const element = this.element
if (hasOwnProperty.call(updatePayload, 'animate')) {
this._animate = updatePayload.animate
delete updatePayload.animate
}
if (this._animate) {
const {duration = 0.4, damping = 0, velocity = 0, options = 0, completion = () => {}} = this._animate
return $ui.animate({
duration,
animation() {
Object.keys(updatePayload).forEach(prop => {
update(updatePayload) {
const element = this.element
if (hasOwnProperty.call(updatePayload, 'animate')) {
this._animate = updatePayload.animate
delete updatePayload.animate
}
if (this._animate) {
const { duration = 0.4, damping = 0, velocity = 0, options = 0, completion = () => {} } = this._animate
$ui.animate({
duration,
animation() {
Object.keys(updatePayload).forEach(prop => {
element[prop] = updatePayload[prop]
})
},
damping,
velocity,
options,
completion
})
this.showOverlay()
return
}
Object.keys(updatePayload).forEach(prop => {
element[prop] = updatePayload[prop]
})
},
damping,
velocity,
options,
completion
})
})
this.showOverlay()
}
Object.keys(updatePayload).forEach(prop => {
element[prop] = updatePayload[prop]
})
}
showOverlay() {
if (!global.__REACT_JSBOX_HIGHLIGHT_UPDATES__) {
return
}
const { cornerRadius, smoothCorners, size } = this.element
const overlayView = $ui.create({
type: 'view',
props: {
frame: $rect(0, 0, size.width, size.height),
alpha: 0.6,
cornerRadius,
smoothCorners,
bgcolor: $color('clear'),
borderColor: $color('#37afa9'),
borderWidth: 2,
userInteractionEnabled: false
}
})
this.element.add(overlayView)
setTimeout(() => {
overlayView.remove()
}, 300)
}
}

52

src/helper.js

@@ -1,2 +0,2 @@

export const emptyFunction = () => { }
export const emptyFunction = () => {}

@@ -13,3 +13,3 @@ export const emptyObject = {}

export function getOCClassName(jsValue) {
return jsValue.ocValue().__clsName
return jsValue.ocValue().__clsName
}

@@ -20,29 +20,29 @@

export const is = {
obj: a => a === Object(a),
str: a => typeof a === 'string',
num: a => typeof a === 'number',
und: a => a === void 0,
arr: a => Array.isArray(a),
equ(a, b) {
// Wrong type, doesn't match
if (typeof a !== typeof b) return false
// Atomic, just compare a against b
if (is.str(a) || is.num(a) || is.obj(a)) return a === b
// Array, shallow compare first to see if it's a match
if (is.arr(a) && a == b) return true
// Last resort, go through keys
let i
for (i in a) if (!(i in b)) return false
for (i in b) if (a[i] !== b[i]) return false
return is.und(i) ? a === b : true
}
obj: a => a === Object(a),
str: a => typeof a === 'string',
num: a => typeof a === 'number',
und: a => a === void 0,
arr: a => Array.isArray(a),
equ(a, b) {
// Wrong type, doesn't match
if (typeof a !== typeof b) return false
// Atomic, just compare a against b
if (is.str(a) || is.num(a) || is.obj(a)) return a === b
// Array, shallow compare first to see if it's a match
if (is.arr(a) && a == b) return true
// Last resort, go through keys
let i
for (i in a) if (!(i in b)) return false
for (i in b) if (a[i] !== b[i]) return false
return is.und(i) ? a === b : true
}
}
export function filterProps(oldProps = {}, newProps) {
const sameProps = Object.keys(newProps).filter(key => is.equ(newProps[key], oldProps[key]))
const filteredProps = [...sameProps, 'layout', 'events', 'children', 'key', 'ref'].reduce((acc, prop) => {
let { [prop]: _, ...rest } = acc
return rest
}, newProps)
return filteredProps
const sameProps = Object.keys(newProps).filter(key => is.equ(newProps[key], oldProps[key]))
const filteredProps = [...sameProps, 'layout', 'events', 'children', 'key', 'ref'].reduce((acc, prop) => {
let { [prop]: _, ...rest } = acc
return rest
}, newProps)
return filteredProps
}

18

src/hooks/index.js

@@ -1,9 +0,9 @@

export {default as useCache} from './useCache'
export {default as useDebounce} from './useDebounce'
export {default as useEventHandler} from './useEventHandler'
export {default as useFirstMountState} from './useFirstMountState'
export {default as useLatest} from './useLatest'
export {default as useRendersCount} from './useRendersCount'
export {default as useTimeoutFn} from './useTimeoutFn'
export {default as useUpdate} from './useUpdate'
export {default as useUpdateEffect} from './useUpdateEffect'
export { default as useCache } from './useCache'
export { default as useDebounce } from './useDebounce'
export { default as useEventHandler } from './useEventHandler'
export { default as useFirstMountState } from './useFirstMountState'
export { default as useLatest } from './useLatest'
export { default as useRendersCount } from './useRendersCount'
export { default as useTimeoutFn } from './useTimeoutFn'
export { default as useUpdate } from './useUpdate'
export { default as useUpdateEffect } from './useUpdateEffect'

22

src/hooks/useCache.js

@@ -1,17 +0,17 @@

import {useEffect, useState} from 'react'
import { useEffect, useState } from 'react'
const useCache = (key, initialValue) => {
const [state, setState] = useState(() => {
const cacheValue = $cache.get(key)
if (cacheValue === undefined) {
$cache.set(key, initialValue)
return initialValue
}
return cacheValue
})
useEffect(() => void $cache.set(key, state))
const [state, setState] = useState(() => {
const cacheValue = $cache.get(key)
if (cacheValue === undefined) {
$cache.set(key, initialValue)
return initialValue
}
return cacheValue
})
useEffect(() => void $cache.set(key, state))
return [state, setState]
return [state, setState]
}
export default useCache

8

src/hooks/useDebounce.js

@@ -1,10 +0,10 @@

import {useEffect} from 'react'
import { useEffect } from 'react'
import useTimeoutFn from './useTimeoutFn'
export default function useDebounce(fn, ms = 0, deps = []) {
const [isReady, cancel, reset] = useTimeoutFn(fn, ms)
const [isReady, cancel, reset] = useTimeoutFn(fn, ms)
useEffect(reset, deps)
useEffect(reset, deps)
return [isReady, cancel]
return [isReady, cancel]
}

4

src/hooks/useEventHandler.js

@@ -1,5 +0,5 @@

import { useMemo } from "react"
import { useMemo } from 'react'
const useEventHandler = (eventHandlerMap, deps) => useMemo(() => eventHandlerMap, deps)
export default useEventHandler
export default useEventHandler

14

src/hooks/useFirstMountState.js

@@ -1,15 +0,15 @@

import {useRef} from 'react'
import { useRef } from 'react'
const useFirstMountState = () => {
const isFirst = useRef(true)
const isFirst = useRef(true)
if (isFirst.current) {
isFirst.current = false
if (isFirst.current) {
isFirst.current = false
return true
}
return true
}
return isFirst.current
return isFirst.current
}
export default useFirstMountState

8

src/hooks/useLatest.js

@@ -1,9 +0,9 @@

import {useRef} from 'react'
import { useRef } from 'react'
const useLatest = value => {
const ref = useRef(value)
ref.current = value
return ref
const ref = useRef(value)
ref.current = value
return ref
}
export default useLatest

4

src/hooks/useRendersCount.js

@@ -1,5 +0,5 @@

import {useRef} from 'react'
import { useRef } from 'react'
export default function useRendersCount() {
return ++useRef(0).current
return ++useRef(0).current
}

54

src/hooks/useTimeoutFn.js

@@ -1,38 +0,38 @@

import {useCallback, useEffect, useRef} from 'react'
import { useCallback, useEffect, useRef } from 'react'
export default function useTimeoutFn(fn, ms = 0) {
const ready = useRef(false)
const timeout = useRef()
const callback = useRef(fn)
const ready = useRef(false)
const timeout = useRef()
const callback = useRef(fn)
const isReady = useCallback(() => ready.current, [])
const isReady = useCallback(() => ready.current, [])
const set = useCallback(() => {
ready.current = false
timeout.current && clearTimeout(timeout.current)
const set = useCallback(() => {
ready.current = false
timeout.current && clearTimeout(timeout.current)
timeout.current = setTimeout(() => {
ready.current = true
callback.current()
}, ms)
}, [ms])
timeout.current = setTimeout(() => {
ready.current = true
callback.current()
}, ms)
}, [ms])
const clear = useCallback(() => {
ready.current = null
timeout.current && clearTimeout(timeout.current)
}, [])
const clear = useCallback(() => {
ready.current = null
timeout.current && clearTimeout(timeout.current)
}, [])
// update ref when function changes
useEffect(() => {
callback.current = fn
}, [fn])
// update ref when function changes
useEffect(() => {
callback.current = fn
}, [fn])
// set on mount, clear on unmount
useEffect(() => {
set()
// set on mount, clear on unmount
useEffect(() => {
set()
return clear
}, [ms])
return clear
}, [ms])
return [isReady, clear, set]
return [isReady, clear, set]
}

6

src/hooks/useUpdate.js

@@ -1,2 +0,2 @@

import {useReducer} from 'react'
import { useReducer } from 'react'

@@ -6,6 +6,6 @@ const updateReducer = num => (num + 1) % 1000000

const useUpdate = () => {
const [, update] = useReducer(updateReducer, 0)
return update
const [, update] = useReducer(updateReducer, 0)
return update
}
export default useUpdate

14

src/hooks/useUpdateEffect.js

@@ -1,14 +0,14 @@

import {useEffect} from 'react'
import { useEffect } from 'react'
import useFirstMountState from './useFirstMountState'
const useUpdateEffect = (effect, deps) => {
const isFirstMount = useFirstMountState()
const isFirstMount = useFirstMountState()
useEffect(() => {
if (!isFirstMount) {
return effect()
}
}, deps)
useEffect(() => {
if (!isFirstMount) {
return effect()
}
}, deps)
}
export default useUpdateEffect

180

src/hostconfig.js
import view from './components/view'
import {now, filterProps} from './helper'
import { now, filterProps } from './helper'

@@ -7,127 +7,127 @@ const NO_CONTEXT = true

const hostConfig = {
now,
now,
setTimeout,
setTimeout,
clearTimeout,
clearTimeout,
scheduleTimeout: setTimeout,
scheduleTimeout: setTimeout,
cancelTimeout: clearTimeout,
cancelTimeout: clearTimeout,
noTimeout: -1,
noTimeout: -1,
supportsMutation: true,
supportsMutation: true,
supportsPersistence: false,
supportsPersistence: false,
supportsHydration: false,
supportsHydration: false,
isPrimaryRenderer: true,
isPrimaryRenderer: true,
getPublicInstance({element}) {
return element
},
getPublicInstance({ element }) {
return element
},
getRootHostContext() {
return NO_CONTEXT
},
getRootHostContext() {
return NO_CONTEXT
},
getChildHostContext() {
return NO_CONTEXT
},
getChildHostContext() {
return NO_CONTEXT
},
prepareForCommit() {
// noop
},
prepareForCommit() {
// noop
},
resetAfterCommit() {
// noop
},
resetAfterCommit() {
// noop
},
createInstance(type, props, internalInstanceHandle) {
return new view(type, props)
},
createInstance(type, props, internalInstanceHandle) {
return new view(type, props)
},
appendInitialChild(parentInstance, child) {
parentInstance.appendChild(child)
},
appendInitialChild(parentInstance, child) {
parentInstance.appendChild(child)
},
finalizeInitialChildren(parentInstance, type, props) {
return false
},
finalizeInitialChildren(parentInstance, type, props) {
return false
},
prepareUpdate(instance, type, oldProps, newProps) {
return filterProps(oldProps, newProps)
},
prepareUpdate(instance, type, oldProps, newProps) {
return filterProps(oldProps, newProps)
},
shouldSetTextContent() {
return false
},
shouldSetTextContent() {
return false
},
shouldDeprioritizeSubtree(type, props) {
return !!props.hidden
},
shouldDeprioritizeSubtree(type, props) {
return !!props.hidden
},
createTextInstance() {
return null
},
createTextInstance() {
return null
},
appendChild(parentInstance, child) {
parentInstance.appendChild(child)
},
appendChild(parentInstance, child) {
parentInstance.appendChild(child)
},
appendChildToContainer(parentInstance, child) {
const parent = parentInstance.element || parentInstance
parent.add(child.element)
},
appendChildToContainer(parentInstance, child) {
const parent = parentInstance.element || parentInstance
parent.add(child.element)
},
commitMount(instance, updatePayload, type, oldProps, newProps) {
// noop
},
commitMount(instance, updatePayload, type, oldProps, newProps) {
// noop
},
commitUpdate(instance, updatePayload, type, oldProps, newProps) {
if (updatePayload) {
instance.update(updatePayload)
}
},
commitUpdate(instance, updatePayload, type, oldProps, newProps) {
if (updatePayload) {
instance.update(updatePayload)
}
},
insertBefore(parentInstance, child, beforeChild) {
parentInstance.insertBefore(child, beforeChild)
},
insertBefore(parentInstance, child, beforeChild) {
parentInstance.insertBefore(child, beforeChild)
},
insertInContainerBefore(parentInstance, child, beforeChild) {
const parent = parentInstance.element || parentInstance
parent.insertBelow(child.element, beforeChild.element)
},
insertInContainerBefore(parentInstance, child, beforeChild) {
const parent = parentInstance.element || parentInstance
parent.insertBelow(child.element, beforeChild.element)
},
removeChild(parentInstance, child) {
parentInstance.removeChild(child)
},
removeChild(parentInstance, child) {
parentInstance.removeChild(child)
},
removeChildFromContainer(parentInstance, child) {
child.element.remove()
},
removeChildFromContainer(parentInstance, child) {
child.element.remove()
},
resetTextContent() {
// noop
},
resetTextContent() {
// noop
},
hideInstance(instance) {
instance.element.hidden = true
},
hideInstance(instance) {
instance.element.hidden = true
},
unhideInstance(instance) {
instance.element.hidden = false
},
unhideInstance(instance) {
instance.element.hidden = false
},
hideTextInstance(instance) {
// noop
},
hideTextInstance(instance) {
// noop
},
unhideTextInstance(instance, props) {
// noop
}
unhideTextInstance(instance, props) {
// noop
}
}
export default hostConfig

2

src/index.js

@@ -1,2 +0,2 @@

export {render} from './renderer'
export * from './renderer'
export * from './hooks'

24

src/renderer.js

@@ -10,17 +10,17 @@ import ReactFiberReconciler from 'react-reconciler'

const defaultOptions = {
onInit: () => {},
onRender: () => {}
onInit: () => {},
onRender: () => {}
}
export function render(element, container, options) {
const rendererOptions = Object.assign({}, defaultOptions, options)
let fiberRoot = container._reactRootContainer
if (!fiberRoot) {
container.views.forEach(view => view.remove())
const newFiberRoot = reconciler.createContainer(container, isConcurrent, hydrate)
// eslint-disable-next-line
fiberRoot = container._reactRootContainer = newFiberRoot
}
rendererOptions.onInit(reconciler)
return reconciler.updateContainer(element, fiberRoot, null, rendererOptions.onRender)
const rendererOptions = Object.assign({}, defaultOptions, options)
let fiberRoot = container._reactRootContainer
if (!fiberRoot) {
container.views.forEach(view => view.remove())
const newFiberRoot = reconciler.createContainer(container, isConcurrent, hydrate)
// eslint-disable-next-line
fiberRoot = container._reactRootContainer = newFiberRoot
}
rendererOptions.onInit(reconciler)
return reconciler.updateContainer(element, fiberRoot, null, rendererOptions.onRender)
}
dist/react-jsbox.js.map
dist/react-jsbox.min.js
dist/react-jsbox.min.js.map
dist/react-jsbox.modern.js
dist/react-jsbox.modern.js.map
dist/react-jsbox.module.js
dist/react-jsbox.module.js.map
dist/react-jsbox.umd.js
dist/react-jsbox.umd.js.map
src/cjs.js
dist/react-jsbox.js

Sorry, the diff of this file is too big to display

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc