Merge pull request #91 from QURIresearch/staging

Staging -> Master, 3/25/2022
This commit is contained in:
Ozzie Gooen 2022-03-25 08:23:37 -04:00 committed by GitHub
commit ba21ada361
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 343 additions and 139 deletions

View File

@ -79,7 +79,9 @@ jobs:
working-directory: packages/website
steps:
- uses: actions/checkout@v2
- name: Install dependencies
run: yarn
- name: Install dependencies from monorepo level
run: cd ../../ && yarn
- name: Build rescript in squiggle-lang
run: cd ../squiggle-lang && yarn build
- name: Build website assets
run: yarn build

View File

@ -163,7 +163,7 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = (props) => {
// We are looking at a function. In this case, we draw a Percentiles chart
let start = props.diagramStart ? props.diagramStart : 0;
let stop = props.diagramStop ? props.diagramStop : 10;
let count = props.diagramCount ? props.diagramCount : 0.1;
let count = props.diagramCount ? props.diagramCount : 100;
let step = (stop - start) / count;
let data = _.range(start, stop, step).map((x) => {
if (chartResult.NAME == "Function") {
@ -192,10 +192,10 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = (props) => {
p99: percentiles[12],
};
}
return null;
}
return 0;
});
return <SquigglePercentilesChart data={{ facet: data }} />;
return <SquigglePercentilesChart data={{ facet: data.filter(x => x !== null) }} />;
}
});
return <>{chartResults}</>;

View File

@ -84,7 +84,8 @@
"y": { "scale": "yscale", "field": "y" },
"y2": { "scale": "yscale", "value": 0 },
"fill": {
"signal": "{gradient: 'linear', x1: 1, y1: 1, x2: 0, y2: 1, stops: [ {offset: 0.0, color: 'steelblue'}, {offset: clamp(mousex, 0, 1), color: 'steelblue'}, {offset: clamp(mousex, 0, 1), color: 'blue'}, {offset: 1.0, color: 'blue'} ] }"
"signal": "{gradient: 'linear', x1: 1, y1: 1, x2: 0, y2: 1, stops: [ {offset: 0.0, color: '#11ac8f'}, {offset: clamp(mousex, 0, 1), color: '#11ac8f'}, {offset: clamp(mousex, 0, 1), color: '#1b6fac'}, {offset: 1.0, color: '#1b6fac'} ] }",
"color": "#000"
},
"interpolate": { "value": "monotone" },
"fillOpacity": { "value": 1 }

View File

@ -81,3 +81,9 @@ complicated, as it has to return either a number, or a distribution, or even
a representation of a function of distributions. Currently the export is simply
the generated type that rescript creates, and can be quite confusing. We therefore
highly recommend the use of typescript when creating tests or using this package.
## Potential Issues
If you experiment with generating different types of .gen.ts files and similar, note that they won't be caught by git (because they are in .gitignore). Make sure you delete these extra files, once they are unecessary.
```
rm src/rescript/**/*.gen.ts
```

View File

@ -22,7 +22,7 @@ let makeSymbolicFromTwoFloats = (name, fn) =>
~inputTypes=[#Float, #Float],
~run=x =>
switch x {
| [#Float(a), #Float(b)] => Ok(#SymbolicDist(fn(a, b)))
| [#Float(a), #Float(b)] => fn(a, b) |> E.R.fmap(r => (#SymbolicDist(r)))
| e => wrongInputsError(e)
},
(),
@ -35,7 +35,7 @@ let makeSymbolicFromOneFloat = (name, fn) =>
~inputTypes=[#Float],
~run=x =>
switch x {
| [#Float(a)] => Ok(#SymbolicDist(fn(a)))
| [#Float(a)] => fn(a) |> E.R.fmap(r => #SymbolicDist(r))
| e => wrongInputsError(e)
},
(),

View File

@ -2,7 +2,10 @@ open SymbolicDistTypes
module Normal = {
type t = normal
let make = (mean, stdev): symbolicDist => #Normal({mean: mean, stdev: stdev})
let make = (mean: float, stdev: float): result<symbolicDist,string> =>
stdev > 0.0
? Ok(#Normal({mean: mean, stdev: stdev}))
: Error("Standard deviation of normal distribution must be larger than 0")
let pdf = (x, t: t) => Jstat.Normal.pdf(x, t.mean, t.stdev)
let cdf = (x, t: t) => Jstat.Normal.cdf(x, t.mean, t.stdev)
@ -45,10 +48,12 @@ module Normal = {
module Exponential = {
type t = exponential
let make = (rate: float): symbolicDist =>
#Exponential({
let make = (rate: float): result<symbolicDist,string> =>
rate > 0.0
? Ok(#Exponential({
rate: rate,
})
}))
: Error("Exponential distributions mean must be larger than 0")
let pdf = (x, t: t) => Jstat.Exponential.pdf(x, t.rate)
let cdf = (x, t: t) => Jstat.Exponential.cdf(x, t.rate)
let inv = (p, t: t) => Jstat.Exponential.inv(p, t.rate)
@ -84,7 +89,10 @@ module Triangular = {
module Beta = {
type t = beta
let make = (alpha, beta) => #Beta({alpha: alpha, beta: beta})
let make = (alpha, beta) =>
alpha > 0.0 && beta > 0.0
? Ok(#Beta({alpha: alpha, beta: beta}))
: Error("Beta distribution parameters must be positive")
let pdf = (x, t: t) => Jstat.Beta.pdf(x, t.alpha, t.beta)
let cdf = (x, t: t) => Jstat.Beta.cdf(x, t.alpha, t.beta)
let inv = (p, t: t) => Jstat.Beta.inv(p, t.alpha, t.beta)
@ -95,7 +103,10 @@ module Beta = {
module Lognormal = {
type t = lognormal
let make = (mu, sigma) => #Lognormal({mu: mu, sigma: sigma})
let make = (mu, sigma) =>
sigma > 0.0
? Ok(#Lognormal({mu: mu, sigma: sigma}))
: Error("Lognormal standard deviation must be larger than 0")
let pdf = (x, t: t) => Jstat.Lognormal.pdf(x, t.mu, t.sigma)
let cdf = (x, t: t) => Jstat.Lognormal.cdf(x, t.mu, t.sigma)
let inv = (p, t: t) => Jstat.Lognormal.inv(p, t.mu, t.sigma)
@ -110,11 +121,16 @@ module Lognormal = {
#Lognormal({mu: mu, sigma: sigma})
}
let fromMeanAndStdev = (mean, stdev) => {
if stdev > 0.0 {
let variance = Js.Math.pow_float(~base=stdev, ~exp=2.0)
let meanSquared = Js.Math.pow_float(~base=mean, ~exp=2.0)
let mu = Js.Math.log(mean) -. 0.5 *. Js.Math.log(variance /. meanSquared +. 1.0)
let sigma = Js.Math.pow_float(~base=Js.Math.log(variance /. meanSquared +. 1.0), ~exp=0.5)
#Lognormal({mu: mu, sigma: sigma})
Ok(#Lognormal({mu: mu, sigma: sigma}))
}
else {
Error("Lognormal standard deviation must be larger than 0")
}
}
let multiply = (l1, l2) => {
@ -137,7 +153,11 @@ module Lognormal = {
module Uniform = {
type t = uniform
let make = (low, high) => #Uniform({low: low, high: high})
let make = (low, high) =>
high > low
? Ok(#Uniform({low: low, high: high}))
: Error("High must be larger than low")
let pdf = (x, t: t) => Jstat.Uniform.pdf(x, t.low, t.high)
let cdf = (x, t: t) => Jstat.Uniform.cdf(x, t.low, t.high)
let inv = (p, t: t) => Jstat.Uniform.inv(p, t.low, t.high)

View File

@ -25,61 +25,61 @@ module Uniform = {
type beta
module Beta = {
@module("jstat") @scope("uniform") external pdf: (float, float, float) => float = "pdf"
@module("jstat") @scope("uniform") external cdf: (float, float, float) => float = "cdf"
@module("jstat") @scope("uniform") external inv: (float, float, float) => float = "inv"
@module("jstat") @scope("uniform") external sample: (float, float) => float = "sample"
@module("jstat") @scope("uniform") external mean: (float, float) => float = "mean"
@module("jstat") @scope("beta") external pdf: (float, float, float) => float = "pdf"
@module("jstat") @scope("beta") external cdf: (float, float, float) => float = "cdf"
@module("jstat") @scope("beta") external inv: (float, float, float) => float = "inv"
@module("jstat") @scope("beta") external sample: (float, float) => float = "sample"
@module("jstat") @scope("beta") external mean: (float, float) => float = "mean"
}
module Exponential = {
@module("jstat") @scope("uniform") external pdf: (float, float) => float = "pdf"
@module("jstat") @scope("uniform") external cdf: (float, float) => float = "cdf"
@module("jstat") @scope("uniform") external inv: (float, float) => float = "inv"
@module("jstat") @scope("uniform") external sample: (float) => float = "sample"
@module("jstat") @scope("uniform") external mean: (float) => float = "mean"
@module("jstat") @scope("exponential") external pdf: (float, float) => float = "pdf"
@module("jstat") @scope("exponential") external cdf: (float, float) => float = "cdf"
@module("jstat") @scope("exponential") external inv: (float, float) => float = "inv"
@module("jstat") @scope("exponential") external sample: (float) => float = "sample"
@module("jstat") @scope("exponential") external mean: (float) => float = "mean"
}
module Cauchy = {
@module("jstat") @scope("uniform") external pdf: (float, float, float) => float = "pdf"
@module("jstat") @scope("uniform") external cdf: (float, float, float) => float = "cdf"
@module("jstat") @scope("uniform") external inv: (float, float, float) => float = "inv"
@module("jstat") @scope("uniform") external sample: (float, float) => float = "sample"
@module("jstat") @scope("uniform") external mean: (float, float) => float = "mean"
@module("jstat") @scope("cauchy") external pdf: (float, float, float) => float = "pdf"
@module("jstat") @scope("cauchy") external cdf: (float, float, float) => float = "cdf"
@module("jstat") @scope("cauchy") external inv: (float, float, float) => float = "inv"
@module("jstat") @scope("cauchy") external sample: (float, float) => float = "sample"
@module("jstat") @scope("cauchy") external mean: (float, float) => float = "mean"
}
module Triangular = {
@module("jstat") @scope("uniform") external pdf: (float, float, float, float) => float = "pdf"
@module("jstat") @scope("uniform") external cdf: (float, float, float, float) => float = "cdf"
@module("jstat") @scope("uniform") external inv: (float, float, float, float) => float = "inv"
@module("jstat") @scope("uniform") external sample: (float, float, float) => float = "sample"
@module("jstat") @scope("uniform") external mean: (float, float, float) => float = "mean"
@module("jstat") @scope("triangular") external pdf: (float, float, float, float) => float = "pdf"
@module("jstat") @scope("triangular") external cdf: (float, float, float, float) => float = "cdf"
@module("jstat") @scope("triangular") external inv: (float, float, float, float) => float = "inv"
@module("jstat") @scope("triangular") external sample: (float, float, float) => float = "sample"
@module("jstat") @scope("triangular") external mean: (float, float, float) => float = "mean"
}
module Pareto = {
@module("jstat") @scope("uniform") external pdf: (float, float, float) => float = "pdf"
@module("jstat") @scope("uniform") external cdf: (float, float, float) => float = "cdf"
@module("jstat") @scope("uniform") external inv: (float, float, float) => float = "inv"
@module("jstat") @scope("pareto") external pdf: (float, float, float) => float = "pdf"
@module("jstat") @scope("pareto") external cdf: (float, float, float) => float = "cdf"
@module("jstat") @scope("pareto") external inv: (float, float, float) => float = "inv"
}
module Poisson = {
@module("jstat") @scope("uniform") external pdf: (float, float) => float = "pdf"
@module("jstat") @scope("uniform") external cdf: (float, float) => float = "cdf"
@module("jstat") @scope("uniform") external sample: (float) => float = "sample"
@module("jstat") @scope("uniform") external mean: (float) => float = "mean"
@module("jstat") @scope("poisson") external pdf: (float, float) => float = "pdf"
@module("jstat") @scope("poisson") external cdf: (float, float) => float = "cdf"
@module("jstat") @scope("poisson") external sample: (float) => float = "sample"
@module("jstat") @scope("poisson") external mean: (float) => float = "mean"
}
module Weibull = {
@module("jstat") @scope("uniform") external pdf: (float, float, float) => float = "pdf"
@module("jstat") @scope("uniform") external cdf: (float, float,float ) => float = "cdf"
@module("jstat") @scope("uniform") external sample: (float,float) => float = "sample"
@module("jstat") @scope("uniform") external mean: (float,float) => float = "mean"
@module("jstat") @scope("weibull") external pdf: (float, float, float) => float = "pdf"
@module("jstat") @scope("weibull") external cdf: (float, float,float ) => float = "cdf"
@module("jstat") @scope("weibull") external sample: (float,float) => float = "sample"
@module("jstat") @scope("weibull") external mean: (float,float) => float = "mean"
}
module Binomial = {
@module("jstat") @scope("uniform") external pdf: (float, float, float) => float = "pdf"
@module("jstat") @scope("uniform") external cdf: (float, float,float ) => float = "cdf"
@module("jstat") @scope("binomial") external pdf: (float, float, float) => float = "pdf"
@module("jstat") @scope("binomial") external cdf: (float, float,float ) => float = "cdf"
}
@module("jstat") external sum: array<float> => float = "sum"

View File

@ -1,3 +1,6 @@
module.exports = {
presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
presets: [
require.resolve('@docusaurus/core/lib/babel/preset'),
["@babel/preset-react", { "runtime": "automatic" }]
],
};

View File

@ -0,0 +1,114 @@
---
sidebar_position: 7
---
import { SquiggleEditor } from '../src/components/SquiggleEditor'
# Squiggle Functions Reference
## Distributions
### Normal distribution
The `normal(mean, sd)` function creates a normal distribution with the given mean
and standard deviation.
<SquiggleEditor initialSquiggleString="normal(5, 1)" />
### Uniform distribution
The `uniform(low, high)` function creates a uniform distribution between the
two given numbers.
<SquiggleEditor initialSquiggleString="uniform(3, 7)" />
### Lognormal distribution
The `lognormal(mu, sigma)` returns the log of a normal distribution with parameters
mu and sigma. The log of lognormal(mu, sigma) is a normal distribution with parameters
mean mu and standard deviation sigma.
<SquiggleEditor initialSquiggleString="lognormal(0, 0.7)" />
An alternative format is also available. The "to" notation creates a lognormal
distribution with a 90% confidence interval between the two numbers. We add
this convinience as lognormal distributions are commonly used in practice.
<SquiggleEditor initialSquiggleString="2 to 10" />
Furthermore, it's also possible to create a lognormal from it's actual mean
and standard deviation, using `lognormalFromMeanAndStdDev`.
<SquiggleEditor initialSquiggleString="lognormalFromMeanAndStdDev(20, 10)" />
### Beta distribution
The `beta(a, b)` function creates a beta distribution with parameters a and b:
<SquiggleEditor initialSquiggleString="beta(20, 20)" />
### Exponential distribution
The `exponential(mean)` function creates an exponential distribution with the given
mean.
<SquiggleEditor initialSquiggleString="exponential(1)" />
### The Triangular distribution
The `triangular(a,b,c)` function creates a triangular distribution with lower
bound a, mode b and upper bound c.
<SquiggleEditor initialSquiggleString="triangular(1, 2, 4)" />
### Multimodal distriutions
The multimodal function combines 2 or more other distributions to create a weighted
combination of the two. The first positional arguments represent the distributions
to be combined, and the last argument is how much to weigh every distribution in the
combination.
<SquiggleEditor initialSquiggleString="mm(uniform(0,1), normal(1,1), [0.5, 0.5])" />
It's possible to create discrete distributions using this method.
<SquiggleEditor initialSquiggleString="mm(0, 1, [0.2,0.8])" />
As well as mixed distributions:
<SquiggleEditor initialSquiggleString="mm(3, 8, 1 to 10, [0.2, 0.3, 0.5])" />
## Other Functions
### PDF of a distribution
The `pdf(distribution, x)` function returns the density of a distribution at the
given point x.
<SquiggleEditor initialSquiggleString="pdf(normal(0,1),0)" />
### Inverse of a distribution
The `inv(distribution, prob)` gives the value x or which the probability for all values
lower than x is equal to prob. It is the inverse of `cdf`.
<SquiggleEditor initialSquiggleString="inv(normal(0,1),0.5)" />
### CDF of a distribution
The `cdf(distribution,x)` gives the cumulative probability of the distribution
or all values lower than x. It is the inverse of `inv`.
<SquiggleEditor initialSquiggleString="cdf(normal(0,1),0)" />
### Mean of a distribution
The `mean(distribution)` function gives the mean (expected value) of a distribution.
<SquiggleEditor initialSquiggleString="mean(normal(5, 10))" />
### Sampling a distribution
The `sample(distribution)` samples a given distribution.
<SquiggleEditor initialSquiggleString="sample(normal(0, 10))" />

View File

@ -1,5 +1,5 @@
---
sidebar_position: 3
sidebar_position: 4
---
# Future Features
@ -77,5 +77,34 @@ Right now, Monte Carlo simulations are totally random. It would be nicer to be a
- Possibly a decent web GUI (a much more advanced playground).
- A VS Code extention and similar.
## Fixes
## Bugs
- Discrete distributions are particularly buggy. Try ``mm(1,2,3,4,5,6,7,8,9,10) .* (5 to 8)``
## New Functions
### Distributions
```js
cauchy()
pareto()
metalog()
```
Possibly change mm to mix, or mx(). Also, change input format, maybe to mx([a,b,c], [a,b,c]).
### Functions
```js
samples(distribution, n)
toPdf(distribution)
toCdf(distribution)
toHash(distribution)
trunctate(distribution, leftValue, rightValue)
leftTrunctate(distribution, leftValue)
rightTrunctate(distribution, rightValue)
distributionFromSamples(array, params)
distributionFromPoints()
distributionFromHash()
```

View File

@ -0,0 +1,10 @@
---
sidebar_position: 1
---
# Squiggle
Squiggle is a language for writing calculations under uncertainty. It has use
cases in forecasting and writing better evaluations.
The best way to get started with Squiggle is to [try it out yourself](https://playground.squiggle-language.com/).

View File

@ -1,16 +1,36 @@
---
sidebar_position: 2
sidebar_position: 3
---
# Javascript Library
# Javascript Libraries
There's a very simple javscript library for Squiggle here: https://www.npmjs.com/package/squiggle-experimental.
There are two JavaScript packages currently available for Squiggle:
- [`@quri/squiggle-lang`](https://www.npmjs.com/package/@quri/squiggle-lang)
- [`@quri/squiggle-components`](https://www.npmjs.com/package/@quri/squiggle-components)
You can see it live on this Observable page: [https://observablehq.com/d/a99e822870c4ca5f](https://observablehq.com/d/a99e822870c4ca5f).
Types are available for both packages.
## Squiggle Language
## Simple Example
```
let squiggle = require("squiggle-experimental@0.1.9/dist/index.js")
squiggle.runMePlease("3 + normal(50,1))
```
The `@quri/squiggle-lang` package exports a single function, `run`, which given
a string of Squiggle code, will execute the code and return any exports and the
environment created from the squiggle code.
`run` has two optional arguments. The first optional argument allows you to set
sampling settings for Squiggle when representing distributions. The second optional
argument allows you to pass an environment previously created by another `run`
call. Passing this environment will mean that all previously declared variables
in the previous environment will be made available.
The return type of `run` is a bit complicated, and comes from auto generated js
code that comes from rescript. I highly recommend using typescript when using
this library to help navigate the return type.
## Squiggle Components
The `@quri/squiggle-components` package offers several components and utilities
for people who want to embed Squiggle components into websites. This documentation
relies on `@quri/squiggle-components` frequently.
We host [a storybook](https://components.squiggle-language.com/) with details
and usage of each of the components made available.

View File

@ -1,67 +0,0 @@
---
sidebar_position: 1
---
# Squiggle Language
## Distributions
```js
normal(a,b)
uniform(a,b)
lognormal(a,b)
lognormalFromMeanAndStdDev(mean, stdev)
beta(a,b)
exponential(a)
triangular(a,b,c)
mm(a,b,c, [1,2,3]) //todo: change to mix, or mx(). Also, change input format, maybe to mx([a,b,c], [a,b,c]).
cauchy() //todo
pareto() //todo
metalog() //todo
```
## Functions
```js
pdf(distribution, float)
inv(distribution, float)
cdf(distribution, float)
mean(distribution)
sample(distribution)
scaleExp(distribution, float)
scaleMultiply(distribution, float)
scaleLog(distribution, float)
samples(distribution, n) //todo
toPdf(distribution) //todo
toCdf(distribution) //todo
toHash(distribution) //todo. Make hash of content, like, {xs:[], ys:[]}
trunctate(distribution, leftValue, rightValue) //todo
leftTrunctate(distribution, leftValue) //todo
rightTrunctate(distribution, rightValue) //todo
distributionFromSamples(array, params) //todo
distributionFromPoints() //todo
distributionFromHash() //todo
log() //todo
```
## Example Functions
```js
ozzie_estimate(t) = lognormal({mean: 3 + (t+.1)^2.5, stdev: 8})
nuño_estimate(t) = lognormal({mean: 3 + (t+.1)^2, stdev: 10})
combined(t) = mm(ozzie_estimate(t) .+ nuño_estimate(t))
combined
```
```js
us_economy_2018 = (10.5 to 10.9)T
growth_rate = 1.08 to 1.2
us_economy(t) = us_economy_2018 * (growth_rate^t)
us_population_2019 = 320M to 330M
us_population_growth_rate = 1.01 to 1.1
us_population(t) = us_population_2019 * (us_population_growth_rate^t)
gdp_per_person(t) = us_economy(t)/us_population(t)
gdp_per_person
gdp_per_person
```

View File

@ -0,0 +1,36 @@
---
sidebar_position: 2
---
import { SquiggleEditor } from '../src/components/SquiggleEditor'
# Squiggle Language
The squiggle language has a very simple syntax. The best way to get to understand
it is by simply looking at examples.
## Basic Language
As an example:
<SquiggleEditor initialSquiggleString={`value_of_work = 10 to 70
value_of_work`} />
Squiggle can declare variables (`value_of_work = 10 to 70`) and declare exports
(the lone `value_of_work` line). Variables can be used later in a squiggle program
and even in other notebooks!
An export is rendered to the output view so you can see your result.
the exports can be expressions, such as:
<SquiggleEditor initialSquiggleString="normal(0,1)" />
## Functions
Squiggle supports functions, including the rendering of functions:
<SquiggleEditor initialSquiggleString={`ozzie_estimate(t) = lognormal({mean: 3 + (t+.1)^2.5, stdev: 8})
ozzie_estimate
`} />

View File

@ -1,5 +1,5 @@
---
sidebar_position: 4
sidebar_position: 5
---
# Three Formats of Distributions

View File

@ -3,18 +3,35 @@
const lightCodeTheme = require('prism-react-renderer/themes/github');
const darkCodeTheme = require('prism-react-renderer/themes/dracula');
const path = require('path');
/** @type {import('@docusaurus/types').Config} */
const config = {
title: 'Squiggle (alpha)',
tagline: "Scorable programming, for use by forecasters",
url: 'https://squiggle-documentation.netlify.app',
tagline: "Estimation language for forecasters",
url: 'https://squiggle-language.com',
baseUrl: '/',
onBrokenLinks: 'throw',
onBrokenMarkdownLinks: 'warn',
favicon: 'img/favicon.ico',
organizationName: 'QURI', // Usually your GitHub org/user name.
projectName: 'Squiggle', // Usually your repo name.
organizationName: 'QURIResearch', // Usually your GitHub org/user name.
projectName: 'squiggle', // Usually your repo name.
plugins: [
() => ({
configureWebpack(config, isServer, utils, content) {
return {
resolve: {
alias : {
"@quri/squiggle-components": path.resolve(__dirname, "../components/src"),
"@quri/squiggle-lang": path.resolve(__dirname, "../squiggle-lang/src/js")
}
}
};
}
})
],
presets: [
[
@ -51,7 +68,7 @@ const config = {
items: [
{
type: 'doc',
docId: 'Language',
docId: 'Introduction',
position: 'left',
label: 'Documentation',
},

View File

@ -0,0 +1,13 @@
import BrowserOnly from '@docusaurus/BrowserOnly';
export function SquiggleEditor(props) {
return (
<BrowserOnly fallback={<div>Loading...</div>}>
{() => {
const LibComponent =
require('@quri/squiggle-components').SquiggleEditor;
return <LibComponent {...props} />;
}}
</BrowserOnly>
);
}