diff --git a/poetry.lock b/poetry.lock index 5212ad1c9..6fcd1c70f 100644 --- a/poetry.lock +++ b/poetry.lock @@ -604,14 +604,14 @@ plugins = ["importlib-metadata"] [[package]] name = "pyright" -version = "1.1.283" +version = "1.1.284" description = "Command line wrapper for pyright" category = "dev" optional = false python-versions = ">=3.7" files = [ - {file = "pyright-1.1.283-py3-none-any.whl", hash = "sha256:d5b14bb50ccbfb7769e09a611960665021816ea1b0543e0ffb8c341388c73710"}, - {file = "pyright-1.1.283.tar.gz", hash = "sha256:57dcc7abf0b764d5f587a80faf20186f5666adffe5f34afa10d471e96bbd9509"}, + {file = "pyright-1.1.284-py3-none-any.whl", hash = "sha256:e3bfbd33c20af48eed9d20138767265161ba8a4b55c740476a36ce822bd482d1"}, + {file = "pyright-1.1.284.tar.gz", hash = "sha256:ef7c0e46e38be95687f5a0633e55c5171ca166048b9560558168a976162e287c"}, ] [package.dependencies] @@ -1020,6 +1020,85 @@ typing-extensions = {version = "*", markers = "python_version < \"3.8\""} [package.extras] standard = ["colorama (>=0.4)", "httptools (>=0.5.0)", "python-dotenv (>=0.13)", "pyyaml (>=5.1)", "uvloop (>=0.14.0,!=0.15.0,!=0.15.1)", "watchfiles (>=0.13)", "websockets (>=10.4)"] +[[package]] +name = "websockets" +version = "10.4" +description = "An implementation of the WebSocket Protocol (RFC 6455 & 7692)" +category = "main" +optional = false +python-versions = ">=3.7" +files = [ + {file = "websockets-10.4-cp310-cp310-macosx_10_9_universal2.whl", hash = "sha256:d58804e996d7d2307173d56c297cf7bc132c52df27a3efaac5e8d43e36c21c48"}, + {file = "websockets-10.4-cp310-cp310-macosx_10_9_x86_64.whl", hash = "sha256:bc0b82d728fe21a0d03e65f81980abbbcb13b5387f733a1a870672c5be26edab"}, + {file = "websockets-10.4-cp310-cp310-macosx_11_0_arm64.whl", hash = "sha256:ba089c499e1f4155d2a3c2a05d2878a3428cf321c848f2b5a45ce55f0d7d310c"}, + {file = "websockets-10.4-cp310-cp310-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:33d69ca7612f0ddff3316b0c7b33ca180d464ecac2d115805c044bf0a3b0d032"}, + {file = "websockets-10.4-cp310-cp310-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:62e627f6b6d4aed919a2052efc408da7a545c606268d5ab5bfab4432734b82b4"}, + {file = "websockets-10.4-cp310-cp310-manylinux_2_5_x86_64.manylinux1_x86_64.manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:38ea7b82bfcae927eeffc55d2ffa31665dc7fec7b8dc654506b8e5a518eb4d50"}, + {file = "websockets-10.4-cp310-cp310-musllinux_1_1_aarch64.whl", hash = "sha256:e0cb5cc6ece6ffa75baccfd5c02cffe776f3f5c8bf486811f9d3ea3453676ce8"}, + {file = "websockets-10.4-cp310-cp310-musllinux_1_1_i686.whl", hash = "sha256:ae5e95cfb53ab1da62185e23b3130e11d64431179debac6dc3c6acf08760e9b1"}, + {file = "websockets-10.4-cp310-cp310-musllinux_1_1_x86_64.whl", hash = "sha256:7c584f366f46ba667cfa66020344886cf47088e79c9b9d39c84ce9ea98aaa331"}, + {file = "websockets-10.4-cp310-cp310-win32.whl", hash = "sha256:b029fb2032ae4724d8ae8d4f6b363f2cc39e4c7b12454df8df7f0f563ed3e61a"}, + {file = "websockets-10.4-cp310-cp310-win_amd64.whl", hash = "sha256:8dc96f64ae43dde92530775e9cb169979f414dcf5cff670455d81a6823b42089"}, + {file = "websockets-10.4-cp311-cp311-macosx_10_9_universal2.whl", hash = "sha256:47a2964021f2110116cc1125b3e6d87ab5ad16dea161949e7244ec583b905bb4"}, + {file = "websockets-10.4-cp311-cp311-macosx_10_9_x86_64.whl", hash = "sha256:e789376b52c295c4946403bd0efecf27ab98f05319df4583d3c48e43c7342c2f"}, + {file = "websockets-10.4-cp311-cp311-macosx_11_0_arm64.whl", hash = "sha256:7d3f0b61c45c3fa9a349cf484962c559a8a1d80dae6977276df8fd1fa5e3cb8c"}, + {file = "websockets-10.4-cp311-cp311-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:f55b5905705725af31ccef50e55391621532cd64fbf0bc6f4bac935f0fccec46"}, + {file = "websockets-10.4-cp311-cp311-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:00c870522cdb69cd625b93f002961ffb0c095394f06ba8c48f17eef7c1541f96"}, + {file = "websockets-10.4-cp311-cp311-manylinux_2_5_x86_64.manylinux1_x86_64.manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:8f38706e0b15d3c20ef6259fd4bc1700cd133b06c3c1bb108ffe3f8947be15fa"}, + {file = "websockets-10.4-cp311-cp311-musllinux_1_1_aarch64.whl", hash = "sha256:f2c38d588887a609191d30e902df2a32711f708abfd85d318ca9b367258cfd0c"}, + {file = "websockets-10.4-cp311-cp311-musllinux_1_1_i686.whl", hash = "sha256:fe10ddc59b304cb19a1bdf5bd0a7719cbbc9fbdd57ac80ed436b709fcf889106"}, + {file = "websockets-10.4-cp311-cp311-musllinux_1_1_x86_64.whl", hash = "sha256:90fcf8929836d4a0e964d799a58823547df5a5e9afa83081761630553be731f9"}, + {file = "websockets-10.4-cp311-cp311-win32.whl", hash = "sha256:b9968694c5f467bf67ef97ae7ad4d56d14be2751000c1207d31bf3bb8860bae8"}, + {file = "websockets-10.4-cp311-cp311-win_amd64.whl", hash = "sha256:a7a240d7a74bf8d5cb3bfe6be7f21697a28ec4b1a437607bae08ac7acf5b4882"}, + {file = "websockets-10.4-cp37-cp37m-macosx_10_9_x86_64.whl", hash = "sha256:74de2b894b47f1d21cbd0b37a5e2b2392ad95d17ae983e64727e18eb281fe7cb"}, + {file = "websockets-10.4-cp37-cp37m-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:e3a686ecb4aa0d64ae60c9c9f1a7d5d46cab9bfb5d91a2d303d00e2cd4c4c5cc"}, + {file = "websockets-10.4-cp37-cp37m-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:b0d15c968ea7a65211e084f523151dbf8ae44634de03c801b8bd070b74e85033"}, + {file = "websockets-10.4-cp37-cp37m-manylinux_2_5_x86_64.manylinux1_x86_64.manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:00213676a2e46b6ebf6045bc11d0f529d9120baa6f58d122b4021ad92adabd41"}, + {file = "websockets-10.4-cp37-cp37m-musllinux_1_1_aarch64.whl", hash = "sha256:e23173580d740bf8822fd0379e4bf30aa1d5a92a4f252d34e893070c081050df"}, + {file = "websockets-10.4-cp37-cp37m-musllinux_1_1_i686.whl", hash = "sha256:dd500e0a5e11969cdd3320935ca2ff1e936f2358f9c2e61f100a1660933320ea"}, + {file = "websockets-10.4-cp37-cp37m-musllinux_1_1_x86_64.whl", hash = "sha256:4239b6027e3d66a89446908ff3027d2737afc1a375f8fd3eea630a4842ec9a0c"}, + {file = "websockets-10.4-cp37-cp37m-win32.whl", hash = "sha256:8a5cc00546e0a701da4639aa0bbcb0ae2bb678c87f46da01ac2d789e1f2d2038"}, + {file = "websockets-10.4-cp37-cp37m-win_amd64.whl", hash = "sha256:a9f9a735deaf9a0cadc2d8c50d1a5bcdbae8b6e539c6e08237bc4082d7c13f28"}, + {file = "websockets-10.4-cp38-cp38-macosx_10_9_universal2.whl", hash = "sha256:5c1289596042fad2cdceb05e1ebf7aadf9995c928e0da2b7a4e99494953b1b94"}, + {file = "websockets-10.4-cp38-cp38-macosx_10_9_x86_64.whl", hash = "sha256:0cff816f51fb33c26d6e2b16b5c7d48eaa31dae5488ace6aae468b361f422b63"}, + {file = "websockets-10.4-cp38-cp38-macosx_11_0_arm64.whl", hash = "sha256:dd9becd5fe29773d140d68d607d66a38f60e31b86df75332703757ee645b6faf"}, + {file = "websockets-10.4-cp38-cp38-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:45ec8e75b7dbc9539cbfafa570742fe4f676eb8b0d3694b67dabe2f2ceed8aa6"}, + {file = "websockets-10.4-cp38-cp38-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:4f72e5cd0f18f262f5da20efa9e241699e0cf3a766317a17392550c9ad7b37d8"}, + {file = "websockets-10.4-cp38-cp38-manylinux_2_5_x86_64.manylinux1_x86_64.manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:185929b4808b36a79c65b7865783b87b6841e852ef5407a2fb0c03381092fa3b"}, + {file = "websockets-10.4-cp38-cp38-musllinux_1_1_aarch64.whl", hash = "sha256:7d27a7e34c313b3a7f91adcd05134315002aaf8540d7b4f90336beafaea6217c"}, + {file = "websockets-10.4-cp38-cp38-musllinux_1_1_i686.whl", hash = "sha256:884be66c76a444c59f801ac13f40c76f176f1bfa815ef5b8ed44321e74f1600b"}, + {file = "websockets-10.4-cp38-cp38-musllinux_1_1_x86_64.whl", hash = "sha256:931c039af54fc195fe6ad536fde4b0de04da9d5916e78e55405436348cfb0e56"}, + {file = "websockets-10.4-cp38-cp38-win32.whl", hash = "sha256:db3c336f9eda2532ec0fd8ea49fef7a8df8f6c804cdf4f39e5c5c0d4a4ad9a7a"}, + {file = "websockets-10.4-cp38-cp38-win_amd64.whl", hash = "sha256:48c08473563323f9c9debac781ecf66f94ad5a3680a38fe84dee5388cf5acaf6"}, + {file = "websockets-10.4-cp39-cp39-macosx_10_9_universal2.whl", hash = "sha256:40e826de3085721dabc7cf9bfd41682dadc02286d8cf149b3ad05bff89311e4f"}, + {file = "websockets-10.4-cp39-cp39-macosx_10_9_x86_64.whl", hash = "sha256:56029457f219ade1f2fc12a6504ea61e14ee227a815531f9738e41203a429112"}, + {file = "websockets-10.4-cp39-cp39-macosx_11_0_arm64.whl", hash = "sha256:f5fc088b7a32f244c519a048c170f14cf2251b849ef0e20cbbb0fdf0fdaf556f"}, + {file = "websockets-10.4-cp39-cp39-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:2fc8709c00704194213d45e455adc106ff9e87658297f72d544220e32029cd3d"}, + {file = "websockets-10.4-cp39-cp39-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:0154f7691e4fe6c2b2bc275b5701e8b158dae92a1ab229e2b940efe11905dff4"}, + {file = "websockets-10.4-cp39-cp39-manylinux_2_5_x86_64.manylinux1_x86_64.manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:4c6d2264f485f0b53adf22697ac11e261ce84805c232ed5dbe6b1bcb84b00ff0"}, + {file = "websockets-10.4-cp39-cp39-musllinux_1_1_aarch64.whl", hash = "sha256:9bc42e8402dc5e9905fb8b9649f57efcb2056693b7e88faa8fb029256ba9c68c"}, + {file = "websockets-10.4-cp39-cp39-musllinux_1_1_i686.whl", hash = "sha256:edc344de4dac1d89300a053ac973299e82d3db56330f3494905643bb68801269"}, + {file = "websockets-10.4-cp39-cp39-musllinux_1_1_x86_64.whl", hash = "sha256:84bc2a7d075f32f6ed98652db3a680a17a4edb21ca7f80fe42e38753a58ee02b"}, + {file = "websockets-10.4-cp39-cp39-win32.whl", hash = "sha256:c94ae4faf2d09f7c81847c63843f84fe47bf6253c9d60b20f25edfd30fb12588"}, + {file = "websockets-10.4-cp39-cp39-win_amd64.whl", hash = "sha256:bbccd847aa0c3a69b5f691a84d2341a4f8a629c6922558f2a70611305f902d74"}, + {file = "websockets-10.4-pp37-pypy37_pp73-macosx_10_9_x86_64.whl", hash = "sha256:82ff5e1cae4e855147fd57a2863376ed7454134c2bf49ec604dfe71e446e2193"}, + {file = "websockets-10.4-pp37-pypy37_pp73-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:d210abe51b5da0ffdbf7b43eed0cfdff8a55a1ab17abbec4301c9ff077dd0342"}, + {file = "websockets-10.4-pp37-pypy37_pp73-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:942de28af58f352a6f588bc72490ae0f4ccd6dfc2bd3de5945b882a078e4e179"}, + {file = "websockets-10.4-pp37-pypy37_pp73-manylinux_2_5_x86_64.manylinux1_x86_64.manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:c9b27d6c1c6cd53dc93614967e9ce00ae7f864a2d9f99fe5ed86706e1ecbf485"}, + {file = "websockets-10.4-pp37-pypy37_pp73-win_amd64.whl", hash = "sha256:3d3cac3e32b2c8414f4f87c1b2ab686fa6284a980ba283617404377cd448f631"}, + {file = "websockets-10.4-pp38-pypy38_pp73-macosx_10_9_x86_64.whl", hash = "sha256:da39dd03d130162deb63da51f6e66ed73032ae62e74aaccc4236e30edccddbb0"}, + {file = "websockets-10.4-pp38-pypy38_pp73-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:389f8dbb5c489e305fb113ca1b6bdcdaa130923f77485db5b189de343a179393"}, + {file = "websockets-10.4-pp38-pypy38_pp73-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:09a1814bb15eff7069e51fed0826df0bc0702652b5cb8f87697d469d79c23576"}, + {file = "websockets-10.4-pp38-pypy38_pp73-manylinux_2_5_x86_64.manylinux1_x86_64.manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:ff64a1d38d156d429404aaa84b27305e957fd10c30e5880d1765c9480bea490f"}, + {file = "websockets-10.4-pp38-pypy38_pp73-win_amd64.whl", hash = "sha256:b343f521b047493dc4022dd338fc6db9d9282658862756b4f6fd0e996c1380e1"}, + {file = "websockets-10.4-pp39-pypy39_pp73-macosx_10_9_x86_64.whl", hash = "sha256:932af322458da7e4e35df32f050389e13d3d96b09d274b22a7aa1808f292fee4"}, + {file = "websockets-10.4-pp39-pypy39_pp73-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:d6a4162139374a49eb18ef5b2f4da1dd95c994588f5033d64e0bbfda4b6b6fcf"}, + {file = "websockets-10.4-pp39-pypy39_pp73-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:c57e4c1349fbe0e446c9fa7b19ed2f8a4417233b6984277cce392819123142d3"}, + {file = "websockets-10.4-pp39-pypy39_pp73-manylinux_2_5_x86_64.manylinux1_x86_64.manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:b627c266f295de9dea86bd1112ed3d5fafb69a348af30a2422e16590a8ecba13"}, + {file = "websockets-10.4-pp39-pypy39_pp73-win_amd64.whl", hash = "sha256:05a7233089f8bd355e8cbe127c2e8ca0b4ea55467861906b80d2ebc7db4d6b72"}, + {file = "websockets-10.4.tar.gz", hash = "sha256:eef610b23933c54d5d921c92578ae5f89813438fded840c2e9809d378dc765d3"}, +] + [[package]] name = "zipp" version = "3.11.0" @@ -1039,4 +1118,4 @@ testing = ["flake8 (<5)", "func-timeout", "jaraco.functools", "jaraco.itertools" [metadata] lock-version = "2.0" python-versions = "^3.7" -content-hash = "bdbe03e00e254692c4037edb18af3f1c4be6562f95108c9f057691878d09885d" +content-hash = "97dfea67e5b4dd4749628c44911fa43392206c1c77a90191b267f060f95d10c4" diff --git a/pynecone/.templates/web/bun.lockb b/pynecone/.templates/web/bun.lockb index 4a3f56469..0cfe62a6f 100755 Binary files a/pynecone/.templates/web/bun.lockb and b/pynecone/.templates/web/bun.lockb differ diff --git a/pynecone/.templates/web/next.config.js b/pynecone/.templates/web/next.config.js index 90ceeefe4..da1bb770f 100644 --- a/pynecone/.templates/web/next.config.js +++ b/pynecone/.templates/web/next.config.js @@ -1,3 +1,3 @@ module.exports = { - reactStrictMode: true + reactStrictMode: true, }; diff --git a/pynecone/.templates/web/package.json b/pynecone/.templates/web/package.json index 5cd79862d..f4acc2d1f 100644 --- a/pynecone/.templates/web/package.json +++ b/pynecone/.templates/web/package.json @@ -18,7 +18,7 @@ "gridjs-react": "^4.0.0", "next": "^12.1.0", "plotly.js": "2.6.4", - "prettier": "^2.7.1", + "prettier": "^2.8.1", "react": "^17.0.2", "react-dom": "^17.0.2", "react-markdown": "^8.0.3", @@ -28,4 +28,4 @@ "remark-gfm": "^3.0.1", "remark-math": "^5.1.1" } -} \ No newline at end of file +} diff --git a/pynecone/.templates/web/styles/code/prism.js b/pynecone/.templates/web/styles/code/prism.js index 20853361d..5568cf25b 100644 --- a/pynecone/.templates/web/styles/code/prism.js +++ b/pynecone/.templates/web/styles/code/prism.js @@ -1,992 +1,1015 @@ export const light = { - "code[class*=\"language-\"]": { - "background": "hsl(230, 1%, 98%)", - "color": "hsl(230, 8%, 24%)", - "fontFamily": "\"Fira Code\", \"Fira Mono\", Menlo, Consolas, \"DejaVu Sans Mono\", monospace", - "direction": "ltr", - "textAlign": "left", - "whiteSpace": "pre", - "wordSpacing": "normal", - "wordBreak": "normal", - "lineHeight": "1.5", - "MozTabSize": "2", - "OTabSize": "2", - "tabSize": "2", - "WebkitHyphens": "none", - "MozHyphens": "none", - "msHyphens": "none", - "hyphens": "none" - }, - "pre[class*=\"language-\"]": { - "background": "hsl(230, 1%, 98%)", - "color": "hsl(230, 8%, 24%)", - "fontFamily": "\"Fira Code\", \"Fira Mono\", Menlo, Consolas, \"DejaVu Sans Mono\", monospace", - "direction": "ltr", - "textAlign": "left", - "whiteSpace": "pre", - "wordSpacing": "normal", - "wordBreak": "normal", - "lineHeight": "1.5", - "MozTabSize": "2", - "OTabSize": "2", - "tabSize": "2", - "WebkitHyphens": "none", - "MozHyphens": "none", - "msHyphens": "none", - "hyphens": "none", - "padding": "1em", - "margin": "0.5em 0", - "overflow": "auto", - "borderRadius": "0.3em" - }, - "code[class*=\"language-\"]::-moz-selection": { - "background": "hsl(230, 1%, 90%)", - "color": "inherit" - }, - "code[class*=\"language-\"] *::-moz-selection": { - "background": "hsl(230, 1%, 90%)", - "color": "inherit" - }, - "pre[class*=\"language-\"] *::-moz-selection": { - "background": "hsl(230, 1%, 90%)", - "color": "inherit" - }, - "code[class*=\"language-\"]::selection": { - "background": "hsl(230, 1%, 90%)", - "color": "inherit" - }, - "code[class*=\"language-\"] *::selection": { - "background": "hsl(230, 1%, 90%)", - "color": "inherit" - }, - "pre[class*=\"language-\"] *::selection": { - "background": "hsl(230, 1%, 90%)", - "color": "inherit" - }, - ":not(pre) > code[class*=\"language-\"]": { - "padding": "0.2em 0.3em", - "borderRadius": "0.3em", - "whiteSpace": "normal" - }, - "comment": { - "color": "hsl(230, 4%, 64%)", - "fontStyle": "italic" - }, - "prolog": { - "color": "hsl(230, 4%, 64%)" - }, - "cdata": { - "color": "hsl(230, 4%, 64%)" - }, - "doctype": { - "color": "hsl(230, 8%, 24%)" - }, - "punctuation": { - "color": "hsl(230, 8%, 24%)" - }, - "entity": { - "color": "hsl(230, 8%, 24%)", - "cursor": "help" - }, - "attr-name": { - "color": "hsl(35, 99%, 36%)" - }, - "class-name": { - "color": "hsl(35, 99%, 36%)" - }, - "boolean": { - "color": "hsl(35, 99%, 36%)" - }, - "constant": { - "color": "hsl(35, 99%, 36%)" - }, - "number": { - "color": "hsl(35, 99%, 36%)" - }, - "atrule": { - "color": "hsl(35, 99%, 36%)" - }, - "keyword": { - "color": "hsl(301, 63%, 40%)" - }, - "property": { - "color": "hsl(5, 74%, 59%)" - }, - "tag": { - "color": "hsl(5, 74%, 59%)" - }, - "symbol": { - "color": "hsl(5, 74%, 59%)" - }, - "deleted": { - "color": "hsl(5, 74%, 59%)" - }, - "important": { - "color": "hsl(5, 74%, 59%)" - }, - "selector": { - "color": "hsl(119, 34%, 47%)" - }, - "string": { - "color": "hsl(119, 34%, 47%)" - }, - "char": { - "color": "hsl(119, 34%, 47%)" - }, - "builtin": { - "color": "hsl(119, 34%, 47%)" - }, - "inserted": { - "color": "hsl(119, 34%, 47%)" - }, - "regex": { - "color": "hsl(119, 34%, 47%)" - }, - "attr-value": { - "color": "hsl(119, 34%, 47%)" - }, - "attr-value > .token.punctuation": { - "color": "hsl(119, 34%, 47%)" - }, - "variable": { - "color": "hsl(221, 87%, 60%)" - }, - "operator": { - "color": "hsl(221, 87%, 60%)" - }, - "function": { - "color": "hsl(221, 87%, 60%)" - }, - "url": { - "color": "hsl(198, 99%, 37%)" - }, - "attr-value > .token.punctuation.attr-equals": { - "color": "hsl(230, 8%, 24%)" - }, - "special-attr > .token.attr-value > .token.value.css": { - "color": "hsl(230, 8%, 24%)" - }, - ".language-css .token.selector": { - "color": "hsl(5, 74%, 59%)" - }, - ".language-css .token.property": { - "color": "hsl(230, 8%, 24%)" - }, - ".language-css .token.function": { - "color": "hsl(198, 99%, 37%)" - }, - ".language-css .token.url > .token.function": { - "color": "hsl(198, 99%, 37%)" - }, - ".language-css .token.url > .token.string.url": { - "color": "hsl(119, 34%, 47%)" - }, - ".language-css .token.important": { - "color": "hsl(301, 63%, 40%)" - }, - ".language-css .token.atrule .token.rule": { - "color": "hsl(301, 63%, 40%)" - }, - ".language-javascript .token.operator": { - "color": "hsl(301, 63%, 40%)" - }, - ".language-javascript .token.template-string > .token.interpolation > .token.interpolation-punctuation.punctuation": { - "color": "hsl(344, 84%, 43%)" - }, - ".language-json .token.operator": { - "color": "hsl(230, 8%, 24%)" - }, - ".language-json .token.null.keyword": { - "color": "hsl(35, 99%, 36%)" - }, - ".language-markdown .token.url": { - "color": "hsl(230, 8%, 24%)" - }, - ".language-markdown .token.url > .token.operator": { - "color": "hsl(230, 8%, 24%)" - }, - ".language-markdown .token.url-reference.url > .token.string": { - "color": "hsl(230, 8%, 24%)" - }, - ".language-markdown .token.url > .token.content": { - "color": "hsl(221, 87%, 60%)" - }, - ".language-markdown .token.url > .token.url": { - "color": "hsl(198, 99%, 37%)" - }, - ".language-markdown .token.url-reference.url": { - "color": "hsl(198, 99%, 37%)" - }, - ".language-markdown .token.blockquote.punctuation": { - "color": "hsl(230, 4%, 64%)", - "fontStyle": "italic" - }, - ".language-markdown .token.hr.punctuation": { - "color": "hsl(230, 4%, 64%)", - "fontStyle": "italic" - }, - ".language-markdown .token.code-snippet": { - "color": "hsl(119, 34%, 47%)" - }, - ".language-markdown .token.bold .token.content": { - "color": "hsl(35, 99%, 36%)" - }, - ".language-markdown .token.italic .token.content": { - "color": "hsl(301, 63%, 40%)" - }, - ".language-markdown .token.strike .token.content": { - "color": "hsl(5, 74%, 59%)" - }, - ".language-markdown .token.strike .token.punctuation": { - "color": "hsl(5, 74%, 59%)" - }, - ".language-markdown .token.list.punctuation": { - "color": "hsl(5, 74%, 59%)" - }, - ".language-markdown .token.title.important > .token.punctuation": { - "color": "hsl(5, 74%, 59%)" - }, - "bold": { - "fontWeight": "bold" - }, - "italic": { - "fontStyle": "italic" - }, - "namespace": { - "Opacity": "0.8" - }, - "token.tab:not(:empty):before": { - "color": "hsla(230, 8%, 24%, 0.2)" - }, - "token.cr:before": { - "color": "hsla(230, 8%, 24%, 0.2)" - }, - "token.lf:before": { - "color": "hsla(230, 8%, 24%, 0.2)" - }, - "token.space:before": { - "color": "hsla(230, 8%, 24%, 0.2)" - }, - "div.code-toolbar > .toolbar.toolbar > .toolbar-item": { - "marginRight": "0.4em" - }, - "div.code-toolbar > .toolbar.toolbar > .toolbar-item > button": { - "background": "hsl(230, 1%, 90%)", - "color": "hsl(230, 6%, 44%)", - "padding": "0.1em 0.4em", - "borderRadius": "0.3em" - }, - "div.code-toolbar > .toolbar.toolbar > .toolbar-item > a": { - "background": "hsl(230, 1%, 90%)", - "color": "hsl(230, 6%, 44%)", - "padding": "0.1em 0.4em", - "borderRadius": "0.3em" - }, - "div.code-toolbar > .toolbar.toolbar > .toolbar-item > span": { - "background": "hsl(230, 1%, 90%)", - "color": "hsl(230, 6%, 44%)", - "padding": "0.1em 0.4em", - "borderRadius": "0.3em" - }, - "div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:hover": { - "background": "hsl(230, 1%, 78%)", - "color": "hsl(230, 8%, 24%)" - }, - "div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:focus": { - "background": "hsl(230, 1%, 78%)", - "color": "hsl(230, 8%, 24%)" - }, - "div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:hover": { - "background": "hsl(230, 1%, 78%)", - "color": "hsl(230, 8%, 24%)" - }, - "div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:focus": { - "background": "hsl(230, 1%, 78%)", - "color": "hsl(230, 8%, 24%)" - }, - "div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:hover": { - "background": "hsl(230, 1%, 78%)", - "color": "hsl(230, 8%, 24%)" - }, - "div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus": { - "background": "hsl(230, 1%, 78%)", - "color": "hsl(230, 8%, 24%)" - }, - ".line-highlight.line-highlight": { - "background": "hsla(230, 8%, 24%, 0.05)" - }, - ".line-highlight.line-highlight:before": { - "background": "hsl(230, 1%, 90%)", - "color": "hsl(230, 8%, 24%)", - "padding": "0.1em 0.6em", - "borderRadius": "0.3em", - "boxShadow": "0 2px 0 0 rgba(0, 0, 0, 0.2)" - }, - ".line-highlight.line-highlight[data-end]:after": { - "background": "hsl(230, 1%, 90%)", - "color": "hsl(230, 8%, 24%)", - "padding": "0.1em 0.6em", - "borderRadius": "0.3em", - "boxShadow": "0 2px 0 0 rgba(0, 0, 0, 0.2)" - }, - "pre[id].linkable-line-numbers.linkable-line-numbers span.line-numbers-rows > span:hover:before": { - "backgroundColor": "hsla(230, 8%, 24%, 0.05)" - }, - ".line-numbers.line-numbers .line-numbers-rows": { - "borderRightColor": "hsla(230, 8%, 24%, 0.2)" - }, - ".command-line .command-line-prompt": { - "borderRightColor": "hsla(230, 8%, 24%, 0.2)" - }, - ".line-numbers .line-numbers-rows > span:before": { - "color": "hsl(230, 1%, 62%)" - }, - ".command-line .command-line-prompt > span:before": { - "color": "hsl(230, 1%, 62%)" - }, - ".rainbow-braces .token.token.punctuation.brace-level-1": { - "color": "hsl(5, 74%, 59%)" - }, - ".rainbow-braces .token.token.punctuation.brace-level-5": { - "color": "hsl(5, 74%, 59%)" - }, - ".rainbow-braces .token.token.punctuation.brace-level-9": { - "color": "hsl(5, 74%, 59%)" - }, - ".rainbow-braces .token.token.punctuation.brace-level-2": { - "color": "hsl(119, 34%, 47%)" - }, - ".rainbow-braces .token.token.punctuation.brace-level-6": { - "color": "hsl(119, 34%, 47%)" - }, - ".rainbow-braces .token.token.punctuation.brace-level-10": { - "color": "hsl(119, 34%, 47%)" - }, - ".rainbow-braces .token.token.punctuation.brace-level-3": { - "color": "hsl(221, 87%, 60%)" - }, - ".rainbow-braces .token.token.punctuation.brace-level-7": { - "color": "hsl(221, 87%, 60%)" - }, - ".rainbow-braces .token.token.punctuation.brace-level-11": { - "color": "hsl(221, 87%, 60%)" - }, - ".rainbow-braces .token.token.punctuation.brace-level-4": { - "color": "hsl(301, 63%, 40%)" - }, - ".rainbow-braces .token.token.punctuation.brace-level-8": { - "color": "hsl(301, 63%, 40%)" - }, - ".rainbow-braces .token.token.punctuation.brace-level-12": { - "color": "hsl(301, 63%, 40%)" - }, - "pre.diff-highlight > code .token.token.deleted:not(.prefix)": { - "backgroundColor": "hsla(353, 100%, 66%, 0.15)" - }, - "pre > code.diff-highlight .token.token.deleted:not(.prefix)": { - "backgroundColor": "hsla(353, 100%, 66%, 0.15)" - }, - "pre.diff-highlight > code .token.token.deleted:not(.prefix)::-moz-selection": { - "backgroundColor": "hsla(353, 95%, 66%, 0.25)" - }, - "pre.diff-highlight > code .token.token.deleted:not(.prefix) *::-moz-selection": { - "backgroundColor": "hsla(353, 95%, 66%, 0.25)" - }, - "pre > code.diff-highlight .token.token.deleted:not(.prefix)::-moz-selection": { - "backgroundColor": "hsla(353, 95%, 66%, 0.25)" - }, - "pre > code.diff-highlight .token.token.deleted:not(.prefix) *::-moz-selection": { - "backgroundColor": "hsla(353, 95%, 66%, 0.25)" - }, - "pre.diff-highlight > code .token.token.deleted:not(.prefix)::selection": { - "backgroundColor": "hsla(353, 95%, 66%, 0.25)" - }, - "pre.diff-highlight > code .token.token.deleted:not(.prefix) *::selection": { - "backgroundColor": "hsla(353, 95%, 66%, 0.25)" - }, - "pre > code.diff-highlight .token.token.deleted:not(.prefix)::selection": { - "backgroundColor": "hsla(353, 95%, 66%, 0.25)" - }, - "pre > code.diff-highlight .token.token.deleted:not(.prefix) *::selection": { - "backgroundColor": "hsla(353, 95%, 66%, 0.25)" - }, - "pre.diff-highlight > code .token.token.inserted:not(.prefix)": { - "backgroundColor": "hsla(137, 100%, 55%, 0.15)" - }, - "pre > code.diff-highlight .token.token.inserted:not(.prefix)": { - "backgroundColor": "hsla(137, 100%, 55%, 0.15)" - }, - "pre.diff-highlight > code .token.token.inserted:not(.prefix)::-moz-selection": { - "backgroundColor": "hsla(135, 73%, 55%, 0.25)" - }, - "pre.diff-highlight > code .token.token.inserted:not(.prefix) *::-moz-selection": { - "backgroundColor": "hsla(135, 73%, 55%, 0.25)" - }, - "pre > code.diff-highlight .token.token.inserted:not(.prefix)::-moz-selection": { - "backgroundColor": "hsla(135, 73%, 55%, 0.25)" - }, - "pre > code.diff-highlight .token.token.inserted:not(.prefix) *::-moz-selection": { - "backgroundColor": "hsla(135, 73%, 55%, 0.25)" - }, - "pre.diff-highlight > code .token.token.inserted:not(.prefix)::selection": { - "backgroundColor": "hsla(135, 73%, 55%, 0.25)" - }, - "pre.diff-highlight > code .token.token.inserted:not(.prefix) *::selection": { - "backgroundColor": "hsla(135, 73%, 55%, 0.25)" - }, - "pre > code.diff-highlight .token.token.inserted:not(.prefix)::selection": { - "backgroundColor": "hsla(135, 73%, 55%, 0.25)" - }, - "pre > code.diff-highlight .token.token.inserted:not(.prefix) *::selection": { - "backgroundColor": "hsla(135, 73%, 55%, 0.25)" - }, - ".prism-previewer.prism-previewer:before": { - "borderColor": "hsl(0, 0, 95%)" - }, - ".prism-previewer-gradient.prism-previewer-gradient div": { - "borderColor": "hsl(0, 0, 95%)", - "borderRadius": "0.3em" - }, - ".prism-previewer-color.prism-previewer-color:before": { - "borderRadius": "0.3em" - }, - ".prism-previewer-easing.prism-previewer-easing:before": { - "borderRadius": "0.3em" - }, - ".prism-previewer.prism-previewer:after": { - "borderTopColor": "hsl(0, 0, 95%)" - }, - ".prism-previewer-flipped.prism-previewer-flipped.after": { - "borderBottomColor": "hsl(0, 0, 95%)" - }, - ".prism-previewer-angle.prism-previewer-angle:before": { - "background": "hsl(0, 0%, 100%)" - }, - ".prism-previewer-time.prism-previewer-time:before": { - "background": "hsl(0, 0%, 100%)" - }, - ".prism-previewer-easing.prism-previewer-easing": { - "background": "hsl(0, 0%, 100%)" - }, - ".prism-previewer-angle.prism-previewer-angle circle": { - "stroke": "hsl(230, 8%, 24%)", - "strokeOpacity": "1" - }, - ".prism-previewer-time.prism-previewer-time circle": { - "stroke": "hsl(230, 8%, 24%)", - "strokeOpacity": "1" - }, - ".prism-previewer-easing.prism-previewer-easing circle": { - "stroke": "hsl(230, 8%, 24%)", - "fill": "transparent" - }, - ".prism-previewer-easing.prism-previewer-easing path": { - "stroke": "hsl(230, 8%, 24%)" - }, - ".prism-previewer-easing.prism-previewer-easing line": { - "stroke": "hsl(230, 8%, 24%)" - } -} - + 'code[class*="language-"]': { + background: "hsl(230, 1%, 98%)", + color: "hsl(230, 8%, 24%)", + fontFamily: + '"Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace', + direction: "ltr", + textAlign: "left", + whiteSpace: "pre", + wordSpacing: "normal", + wordBreak: "normal", + lineHeight: "1.5", + MozTabSize: "2", + OTabSize: "2", + tabSize: "2", + WebkitHyphens: "none", + MozHyphens: "none", + msHyphens: "none", + hyphens: "none", + }, + 'pre[class*="language-"]': { + background: "hsl(230, 1%, 98%)", + color: "hsl(230, 8%, 24%)", + fontFamily: + '"Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace', + direction: "ltr", + textAlign: "left", + whiteSpace: "pre", + wordSpacing: "normal", + wordBreak: "normal", + lineHeight: "1.5", + MozTabSize: "2", + OTabSize: "2", + tabSize: "2", + WebkitHyphens: "none", + MozHyphens: "none", + msHyphens: "none", + hyphens: "none", + padding: "1em", + margin: "0.5em 0", + overflow: "auto", + borderRadius: "0.3em", + }, + 'code[class*="language-"]::-moz-selection': { + background: "hsl(230, 1%, 90%)", + color: "inherit", + }, + 'code[class*="language-"] *::-moz-selection': { + background: "hsl(230, 1%, 90%)", + color: "inherit", + }, + 'pre[class*="language-"] *::-moz-selection': { + background: "hsl(230, 1%, 90%)", + color: "inherit", + }, + 'code[class*="language-"]::selection': { + background: "hsl(230, 1%, 90%)", + color: "inherit", + }, + 'code[class*="language-"] *::selection': { + background: "hsl(230, 1%, 90%)", + color: "inherit", + }, + 'pre[class*="language-"] *::selection': { + background: "hsl(230, 1%, 90%)", + color: "inherit", + }, + ':not(pre) > code[class*="language-"]': { + padding: "0.2em 0.3em", + borderRadius: "0.3em", + whiteSpace: "normal", + }, + comment: { + color: "hsl(230, 4%, 64%)", + fontStyle: "italic", + }, + prolog: { + color: "hsl(230, 4%, 64%)", + }, + cdata: { + color: "hsl(230, 4%, 64%)", + }, + doctype: { + color: "hsl(230, 8%, 24%)", + }, + punctuation: { + color: "hsl(230, 8%, 24%)", + }, + entity: { + color: "hsl(230, 8%, 24%)", + cursor: "help", + }, + "attr-name": { + color: "hsl(35, 99%, 36%)", + }, + "class-name": { + color: "hsl(35, 99%, 36%)", + }, + boolean: { + color: "hsl(35, 99%, 36%)", + }, + constant: { + color: "hsl(35, 99%, 36%)", + }, + number: { + color: "hsl(35, 99%, 36%)", + }, + atrule: { + color: "hsl(35, 99%, 36%)", + }, + keyword: { + color: "hsl(301, 63%, 40%)", + }, + property: { + color: "hsl(5, 74%, 59%)", + }, + tag: { + color: "hsl(5, 74%, 59%)", + }, + symbol: { + color: "hsl(5, 74%, 59%)", + }, + deleted: { + color: "hsl(5, 74%, 59%)", + }, + important: { + color: "hsl(5, 74%, 59%)", + }, + selector: { + color: "hsl(119, 34%, 47%)", + }, + string: { + color: "hsl(119, 34%, 47%)", + }, + char: { + color: "hsl(119, 34%, 47%)", + }, + builtin: { + color: "hsl(119, 34%, 47%)", + }, + inserted: { + color: "hsl(119, 34%, 47%)", + }, + regex: { + color: "hsl(119, 34%, 47%)", + }, + "attr-value": { + color: "hsl(119, 34%, 47%)", + }, + "attr-value > .token.punctuation": { + color: "hsl(119, 34%, 47%)", + }, + variable: { + color: "hsl(221, 87%, 60%)", + }, + operator: { + color: "hsl(221, 87%, 60%)", + }, + function: { + color: "hsl(221, 87%, 60%)", + }, + url: { + color: "hsl(198, 99%, 37%)", + }, + "attr-value > .token.punctuation.attr-equals": { + color: "hsl(230, 8%, 24%)", + }, + "special-attr > .token.attr-value > .token.value.css": { + color: "hsl(230, 8%, 24%)", + }, + ".language-css .token.selector": { + color: "hsl(5, 74%, 59%)", + }, + ".language-css .token.property": { + color: "hsl(230, 8%, 24%)", + }, + ".language-css .token.function": { + color: "hsl(198, 99%, 37%)", + }, + ".language-css .token.url > .token.function": { + color: "hsl(198, 99%, 37%)", + }, + ".language-css .token.url > .token.string.url": { + color: "hsl(119, 34%, 47%)", + }, + ".language-css .token.important": { + color: "hsl(301, 63%, 40%)", + }, + ".language-css .token.atrule .token.rule": { + color: "hsl(301, 63%, 40%)", + }, + ".language-javascript .token.operator": { + color: "hsl(301, 63%, 40%)", + }, + ".language-javascript .token.template-string > .token.interpolation > .token.interpolation-punctuation.punctuation": + { + color: "hsl(344, 84%, 43%)", + }, + ".language-json .token.operator": { + color: "hsl(230, 8%, 24%)", + }, + ".language-json .token.null.keyword": { + color: "hsl(35, 99%, 36%)", + }, + ".language-markdown .token.url": { + color: "hsl(230, 8%, 24%)", + }, + ".language-markdown .token.url > .token.operator": { + color: "hsl(230, 8%, 24%)", + }, + ".language-markdown .token.url-reference.url > .token.string": { + color: "hsl(230, 8%, 24%)", + }, + ".language-markdown .token.url > .token.content": { + color: "hsl(221, 87%, 60%)", + }, + ".language-markdown .token.url > .token.url": { + color: "hsl(198, 99%, 37%)", + }, + ".language-markdown .token.url-reference.url": { + color: "hsl(198, 99%, 37%)", + }, + ".language-markdown .token.blockquote.punctuation": { + color: "hsl(230, 4%, 64%)", + fontStyle: "italic", + }, + ".language-markdown .token.hr.punctuation": { + color: "hsl(230, 4%, 64%)", + fontStyle: "italic", + }, + ".language-markdown .token.code-snippet": { + color: "hsl(119, 34%, 47%)", + }, + ".language-markdown .token.bold .token.content": { + color: "hsl(35, 99%, 36%)", + }, + ".language-markdown .token.italic .token.content": { + color: "hsl(301, 63%, 40%)", + }, + ".language-markdown .token.strike .token.content": { + color: "hsl(5, 74%, 59%)", + }, + ".language-markdown .token.strike .token.punctuation": { + color: "hsl(5, 74%, 59%)", + }, + ".language-markdown .token.list.punctuation": { + color: "hsl(5, 74%, 59%)", + }, + ".language-markdown .token.title.important > .token.punctuation": { + color: "hsl(5, 74%, 59%)", + }, + bold: { + fontWeight: "bold", + }, + italic: { + fontStyle: "italic", + }, + namespace: { + Opacity: "0.8", + }, + "token.tab:not(:empty):before": { + color: "hsla(230, 8%, 24%, 0.2)", + }, + "token.cr:before": { + color: "hsla(230, 8%, 24%, 0.2)", + }, + "token.lf:before": { + color: "hsla(230, 8%, 24%, 0.2)", + }, + "token.space:before": { + color: "hsla(230, 8%, 24%, 0.2)", + }, + "div.code-toolbar > .toolbar.toolbar > .toolbar-item": { + marginRight: "0.4em", + }, + "div.code-toolbar > .toolbar.toolbar > .toolbar-item > button": { + background: "hsl(230, 1%, 90%)", + color: "hsl(230, 6%, 44%)", + padding: "0.1em 0.4em", + borderRadius: "0.3em", + }, + "div.code-toolbar > .toolbar.toolbar > .toolbar-item > a": { + background: "hsl(230, 1%, 90%)", + color: "hsl(230, 6%, 44%)", + padding: "0.1em 0.4em", + borderRadius: "0.3em", + }, + "div.code-toolbar > .toolbar.toolbar > .toolbar-item > span": { + background: "hsl(230, 1%, 90%)", + color: "hsl(230, 6%, 44%)", + padding: "0.1em 0.4em", + borderRadius: "0.3em", + }, + "div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:hover": { + background: "hsl(230, 1%, 78%)", + color: "hsl(230, 8%, 24%)", + }, + "div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:focus": { + background: "hsl(230, 1%, 78%)", + color: "hsl(230, 8%, 24%)", + }, + "div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:hover": { + background: "hsl(230, 1%, 78%)", + color: "hsl(230, 8%, 24%)", + }, + "div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:focus": { + background: "hsl(230, 1%, 78%)", + color: "hsl(230, 8%, 24%)", + }, + "div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:hover": { + background: "hsl(230, 1%, 78%)", + color: "hsl(230, 8%, 24%)", + }, + "div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus": { + background: "hsl(230, 1%, 78%)", + color: "hsl(230, 8%, 24%)", + }, + ".line-highlight.line-highlight": { + background: "hsla(230, 8%, 24%, 0.05)", + }, + ".line-highlight.line-highlight:before": { + background: "hsl(230, 1%, 90%)", + color: "hsl(230, 8%, 24%)", + padding: "0.1em 0.6em", + borderRadius: "0.3em", + boxShadow: "0 2px 0 0 rgba(0, 0, 0, 0.2)", + }, + ".line-highlight.line-highlight[data-end]:after": { + background: "hsl(230, 1%, 90%)", + color: "hsl(230, 8%, 24%)", + padding: "0.1em 0.6em", + borderRadius: "0.3em", + boxShadow: "0 2px 0 0 rgba(0, 0, 0, 0.2)", + }, + "pre[id].linkable-line-numbers.linkable-line-numbers span.line-numbers-rows > span:hover:before": + { + backgroundColor: "hsla(230, 8%, 24%, 0.05)", + }, + ".line-numbers.line-numbers .line-numbers-rows": { + borderRightColor: "hsla(230, 8%, 24%, 0.2)", + }, + ".command-line .command-line-prompt": { + borderRightColor: "hsla(230, 8%, 24%, 0.2)", + }, + ".line-numbers .line-numbers-rows > span:before": { + color: "hsl(230, 1%, 62%)", + }, + ".command-line .command-line-prompt > span:before": { + color: "hsl(230, 1%, 62%)", + }, + ".rainbow-braces .token.token.punctuation.brace-level-1": { + color: "hsl(5, 74%, 59%)", + }, + ".rainbow-braces .token.token.punctuation.brace-level-5": { + color: "hsl(5, 74%, 59%)", + }, + ".rainbow-braces .token.token.punctuation.brace-level-9": { + color: "hsl(5, 74%, 59%)", + }, + ".rainbow-braces .token.token.punctuation.brace-level-2": { + color: "hsl(119, 34%, 47%)", + }, + ".rainbow-braces .token.token.punctuation.brace-level-6": { + color: "hsl(119, 34%, 47%)", + }, + ".rainbow-braces .token.token.punctuation.brace-level-10": { + color: "hsl(119, 34%, 47%)", + }, + ".rainbow-braces .token.token.punctuation.brace-level-3": { + color: "hsl(221, 87%, 60%)", + }, + ".rainbow-braces .token.token.punctuation.brace-level-7": { + color: "hsl(221, 87%, 60%)", + }, + ".rainbow-braces .token.token.punctuation.brace-level-11": { + color: "hsl(221, 87%, 60%)", + }, + ".rainbow-braces .token.token.punctuation.brace-level-4": { + color: "hsl(301, 63%, 40%)", + }, + ".rainbow-braces .token.token.punctuation.brace-level-8": { + color: "hsl(301, 63%, 40%)", + }, + ".rainbow-braces .token.token.punctuation.brace-level-12": { + color: "hsl(301, 63%, 40%)", + }, + "pre.diff-highlight > code .token.token.deleted:not(.prefix)": { + backgroundColor: "hsla(353, 100%, 66%, 0.15)", + }, + "pre > code.diff-highlight .token.token.deleted:not(.prefix)": { + backgroundColor: "hsla(353, 100%, 66%, 0.15)", + }, + "pre.diff-highlight > code .token.token.deleted:not(.prefix)::-moz-selection": + { + backgroundColor: "hsla(353, 95%, 66%, 0.25)", + }, + "pre.diff-highlight > code .token.token.deleted:not(.prefix) *::-moz-selection": + { + backgroundColor: "hsla(353, 95%, 66%, 0.25)", + }, + "pre > code.diff-highlight .token.token.deleted:not(.prefix)::-moz-selection": + { + backgroundColor: "hsla(353, 95%, 66%, 0.25)", + }, + "pre > code.diff-highlight .token.token.deleted:not(.prefix) *::-moz-selection": + { + backgroundColor: "hsla(353, 95%, 66%, 0.25)", + }, + "pre.diff-highlight > code .token.token.deleted:not(.prefix)::selection": { + backgroundColor: "hsla(353, 95%, 66%, 0.25)", + }, + "pre.diff-highlight > code .token.token.deleted:not(.prefix) *::selection": { + backgroundColor: "hsla(353, 95%, 66%, 0.25)", + }, + "pre > code.diff-highlight .token.token.deleted:not(.prefix)::selection": { + backgroundColor: "hsla(353, 95%, 66%, 0.25)", + }, + "pre > code.diff-highlight .token.token.deleted:not(.prefix) *::selection": { + backgroundColor: "hsla(353, 95%, 66%, 0.25)", + }, + "pre.diff-highlight > code .token.token.inserted:not(.prefix)": { + backgroundColor: "hsla(137, 100%, 55%, 0.15)", + }, + "pre > code.diff-highlight .token.token.inserted:not(.prefix)": { + backgroundColor: "hsla(137, 100%, 55%, 0.15)", + }, + "pre.diff-highlight > code .token.token.inserted:not(.prefix)::-moz-selection": + { + backgroundColor: "hsla(135, 73%, 55%, 0.25)", + }, + "pre.diff-highlight > code .token.token.inserted:not(.prefix) *::-moz-selection": + { + backgroundColor: "hsla(135, 73%, 55%, 0.25)", + }, + "pre > code.diff-highlight .token.token.inserted:not(.prefix)::-moz-selection": + { + backgroundColor: "hsla(135, 73%, 55%, 0.25)", + }, + "pre > code.diff-highlight .token.token.inserted:not(.prefix) *::-moz-selection": + { + backgroundColor: "hsla(135, 73%, 55%, 0.25)", + }, + "pre.diff-highlight > code .token.token.inserted:not(.prefix)::selection": { + backgroundColor: "hsla(135, 73%, 55%, 0.25)", + }, + "pre.diff-highlight > code .token.token.inserted:not(.prefix) *::selection": { + backgroundColor: "hsla(135, 73%, 55%, 0.25)", + }, + "pre > code.diff-highlight .token.token.inserted:not(.prefix)::selection": { + backgroundColor: "hsla(135, 73%, 55%, 0.25)", + }, + "pre > code.diff-highlight .token.token.inserted:not(.prefix) *::selection": { + backgroundColor: "hsla(135, 73%, 55%, 0.25)", + }, + ".prism-previewer.prism-previewer:before": { + borderColor: "hsl(0, 0, 95%)", + }, + ".prism-previewer-gradient.prism-previewer-gradient div": { + borderColor: "hsl(0, 0, 95%)", + borderRadius: "0.3em", + }, + ".prism-previewer-color.prism-previewer-color:before": { + borderRadius: "0.3em", + }, + ".prism-previewer-easing.prism-previewer-easing:before": { + borderRadius: "0.3em", + }, + ".prism-previewer.prism-previewer:after": { + borderTopColor: "hsl(0, 0, 95%)", + }, + ".prism-previewer-flipped.prism-previewer-flipped.after": { + borderBottomColor: "hsl(0, 0, 95%)", + }, + ".prism-previewer-angle.prism-previewer-angle:before": { + background: "hsl(0, 0%, 100%)", + }, + ".prism-previewer-time.prism-previewer-time:before": { + background: "hsl(0, 0%, 100%)", + }, + ".prism-previewer-easing.prism-previewer-easing": { + background: "hsl(0, 0%, 100%)", + }, + ".prism-previewer-angle.prism-previewer-angle circle": { + stroke: "hsl(230, 8%, 24%)", + strokeOpacity: "1", + }, + ".prism-previewer-time.prism-previewer-time circle": { + stroke: "hsl(230, 8%, 24%)", + strokeOpacity: "1", + }, + ".prism-previewer-easing.prism-previewer-easing circle": { + stroke: "hsl(230, 8%, 24%)", + fill: "transparent", + }, + ".prism-previewer-easing.prism-previewer-easing path": { + stroke: "hsl(230, 8%, 24%)", + }, + ".prism-previewer-easing.prism-previewer-easing line": { + stroke: "hsl(230, 8%, 24%)", + }, +}; export const dark = { - "code[class*=\"language-\"]": { - "background": "hsl(220, 13%, 18%)", - "color": "hsl(220, 14%, 71%)", - "textShadow": "0 1px rgba(0, 0, 0, 0.3)", - "fontFamily": "\"Fira Code\", \"Fira Mono\", Menlo, Consolas, \"DejaVu Sans Mono\", monospace", - "direction": "ltr", - "textAlign": "left", - "whiteSpace": "pre", - "wordSpacing": "normal", - "wordBreak": "normal", - "lineHeight": "1.5", - "MozTabSize": "2", - "OTabSize": "2", - "tabSize": "2", - "WebkitHyphens": "none", - "MozHyphens": "none", - "msHyphens": "none", - "hyphens": "none" - }, - "pre[class*=\"language-\"]": { - "background": "hsl(220, 13%, 18%)", - "color": "hsl(220, 14%, 71%)", - "textShadow": "0 1px rgba(0, 0, 0, 0.3)", - "fontFamily": "\"Fira Code\", \"Fira Mono\", Menlo, Consolas, \"DejaVu Sans Mono\", monospace", - "direction": "ltr", - "textAlign": "left", - "whiteSpace": "pre", - "wordSpacing": "normal", - "wordBreak": "normal", - "lineHeight": "1.5", - "MozTabSize": "2", - "OTabSize": "2", - "tabSize": "2", - "WebkitHyphens": "none", - "MozHyphens": "none", - "msHyphens": "none", - "hyphens": "none", - "padding": "1em", - "margin": "0.5em 0", - "overflow": "auto", - "borderRadius": "0.3em" - }, - "code[class*=\"language-\"]::-moz-selection": { - "background": "hsl(220, 13%, 28%)", - "color": "inherit", - "textShadow": "none" - }, - "code[class*=\"language-\"] *::-moz-selection": { - "background": "hsl(220, 13%, 28%)", - "color": "inherit", - "textShadow": "none" - }, - "pre[class*=\"language-\"] *::-moz-selection": { - "background": "hsl(220, 13%, 28%)", - "color": "inherit", - "textShadow": "none" - }, - "code[class*=\"language-\"]::selection": { - "background": "hsl(220, 13%, 28%)", - "color": "inherit", - "textShadow": "none" - }, - "code[class*=\"language-\"] *::selection": { - "background": "hsl(220, 13%, 28%)", - "color": "inherit", - "textShadow": "none" - }, - "pre[class*=\"language-\"] *::selection": { - "background": "hsl(220, 13%, 28%)", - "color": "inherit", - "textShadow": "none" - }, - ":not(pre) > code[class*=\"language-\"]": { - "padding": "0.2em 0.3em", - "borderRadius": "0.3em", - "whiteSpace": "normal" - }, - "comment": { - "color": "hsl(220, 10%, 40%)", - "fontStyle": "italic" - }, - "prolog": { - "color": "hsl(220, 10%, 40%)" - }, - "cdata": { - "color": "hsl(220, 10%, 40%)" - }, - "doctype": { - "color": "hsl(220, 14%, 71%)" - }, - "punctuation": { - "color": "hsl(220, 14%, 71%)" - }, - "entity": { - "color": "hsl(220, 14%, 71%)", - "cursor": "help" - }, - "attr-name": { - "color": "hsl(29, 54%, 61%)" - }, - "class-name": { - "color": "hsl(29, 54%, 61%)" - }, - "boolean": { - "color": "hsl(29, 54%, 61%)" - }, - "constant": { - "color": "hsl(29, 54%, 61%)" - }, - "number": { - "color": "hsl(29, 54%, 61%)" - }, - "atrule": { - "color": "hsl(29, 54%, 61%)" - }, - "keyword": { - "color": "hsl(286, 60%, 67%)" - }, - "property": { - "color": "hsl(355, 65%, 65%)" - }, - "tag": { - "color": "hsl(355, 65%, 65%)" - }, - "symbol": { - "color": "hsl(355, 65%, 65%)" - }, - "deleted": { - "color": "hsl(355, 65%, 65%)" - }, - "important": { - "color": "hsl(355, 65%, 65%)" - }, - "selector": { - "color": "hsl(95, 38%, 62%)" - }, - "string": { - "color": "hsl(95, 38%, 62%)" - }, - "char": { - "color": "hsl(95, 38%, 62%)" - }, - "builtin": { - "color": "hsl(95, 38%, 62%)" - }, - "inserted": { - "color": "hsl(95, 38%, 62%)" - }, - "regex": { - "color": "hsl(95, 38%, 62%)" - }, - "attr-value": { - "color": "hsl(95, 38%, 62%)" - }, - "attr-value > .token.punctuation": { - "color": "hsl(95, 38%, 62%)" - }, - "variable": { - "color": "hsl(207, 82%, 66%)" - }, - "operator": { - "color": "hsl(207, 82%, 66%)" - }, - "function": { - "color": "hsl(207, 82%, 66%)" - }, - "url": { - "color": "hsl(187, 47%, 55%)" - }, - "attr-value > .token.punctuation.attr-equals": { - "color": "hsl(220, 14%, 71%)" - }, - "special-attr > .token.attr-value > .token.value.css": { - "color": "hsl(220, 14%, 71%)" - }, - ".language-css .token.selector": { - "color": "hsl(355, 65%, 65%)" - }, - ".language-css .token.property": { - "color": "hsl(220, 14%, 71%)" - }, - ".language-css .token.function": { - "color": "hsl(187, 47%, 55%)" - }, - ".language-css .token.url > .token.function": { - "color": "hsl(187, 47%, 55%)" - }, - ".language-css .token.url > .token.string.url": { - "color": "hsl(95, 38%, 62%)" - }, - ".language-css .token.important": { - "color": "hsl(286, 60%, 67%)" - }, - ".language-css .token.atrule .token.rule": { - "color": "hsl(286, 60%, 67%)" - }, - ".language-javascript .token.operator": { - "color": "hsl(286, 60%, 67%)" - }, - ".language-javascript .token.template-string > .token.interpolation > .token.interpolation-punctuation.punctuation": { - "color": "hsl(5, 48%, 51%)" - }, - ".language-json .token.operator": { - "color": "hsl(220, 14%, 71%)" - }, - ".language-json .token.null.keyword": { - "color": "hsl(29, 54%, 61%)" - }, - ".language-markdown .token.url": { - "color": "hsl(220, 14%, 71%)" - }, - ".language-markdown .token.url > .token.operator": { - "color": "hsl(220, 14%, 71%)" - }, - ".language-markdown .token.url-reference.url > .token.string": { - "color": "hsl(220, 14%, 71%)" - }, - ".language-markdown .token.url > .token.content": { - "color": "hsl(207, 82%, 66%)" - }, - ".language-markdown .token.url > .token.url": { - "color": "hsl(187, 47%, 55%)" - }, - ".language-markdown .token.url-reference.url": { - "color": "hsl(187, 47%, 55%)" - }, - ".language-markdown .token.blockquote.punctuation": { - "color": "hsl(220, 10%, 40%)", - "fontStyle": "italic" - }, - ".language-markdown .token.hr.punctuation": { - "color": "hsl(220, 10%, 40%)", - "fontStyle": "italic" - }, - ".language-markdown .token.code-snippet": { - "color": "hsl(95, 38%, 62%)" - }, - ".language-markdown .token.bold .token.content": { - "color": "hsl(29, 54%, 61%)" - }, - ".language-markdown .token.italic .token.content": { - "color": "hsl(286, 60%, 67%)" - }, - ".language-markdown .token.strike .token.content": { - "color": "hsl(355, 65%, 65%)" - }, - ".language-markdown .token.strike .token.punctuation": { - "color": "hsl(355, 65%, 65%)" - }, - ".language-markdown .token.list.punctuation": { - "color": "hsl(355, 65%, 65%)" - }, - ".language-markdown .token.title.important > .token.punctuation": { - "color": "hsl(355, 65%, 65%)" - }, - "bold": { - "fontWeight": "bold" - }, - "italic": { - "fontStyle": "italic" - }, - "namespace": { - "Opacity": "0.8" - }, - "token.tab:not(:empty):before": { - "color": "hsla(220, 14%, 71%, 0.15)", - "textShadow": "none" - }, - "token.cr:before": { - "color": "hsla(220, 14%, 71%, 0.15)", - "textShadow": "none" - }, - "token.lf:before": { - "color": "hsla(220, 14%, 71%, 0.15)", - "textShadow": "none" - }, - "token.space:before": { - "color": "hsla(220, 14%, 71%, 0.15)", - "textShadow": "none" - }, - "div.code-toolbar > .toolbar.toolbar > .toolbar-item": { - "marginRight": "0.4em" - }, - "div.code-toolbar > .toolbar.toolbar > .toolbar-item > button": { - "background": "hsl(220, 13%, 26%)", - "color": "hsl(220, 9%, 55%)", - "padding": "0.1em 0.4em", - "borderRadius": "0.3em" - }, - "div.code-toolbar > .toolbar.toolbar > .toolbar-item > a": { - "background": "hsl(220, 13%, 26%)", - "color": "hsl(220, 9%, 55%)", - "padding": "0.1em 0.4em", - "borderRadius": "0.3em" - }, - "div.code-toolbar > .toolbar.toolbar > .toolbar-item > span": { - "background": "hsl(220, 13%, 26%)", - "color": "hsl(220, 9%, 55%)", - "padding": "0.1em 0.4em", - "borderRadius": "0.3em" - }, - "div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:hover": { - "background": "hsl(220, 13%, 28%)", - "color": "hsl(220, 14%, 71%)" - }, - "div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:focus": { - "background": "hsl(220, 13%, 28%)", - "color": "hsl(220, 14%, 71%)" - }, - "div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:hover": { - "background": "hsl(220, 13%, 28%)", - "color": "hsl(220, 14%, 71%)" - }, - "div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:focus": { - "background": "hsl(220, 13%, 28%)", - "color": "hsl(220, 14%, 71%)" - }, - "div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:hover": { - "background": "hsl(220, 13%, 28%)", - "color": "hsl(220, 14%, 71%)" - }, - "div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus": { - "background": "hsl(220, 13%, 28%)", - "color": "hsl(220, 14%, 71%)" - }, - ".line-highlight.line-highlight": { - "background": "hsla(220, 100%, 80%, 0.04)" - }, - ".line-highlight.line-highlight:before": { - "background": "hsl(220, 13%, 26%)", - "color": "hsl(220, 14%, 71%)", - "padding": "0.1em 0.6em", - "borderRadius": "0.3em", - "boxShadow": "0 2px 0 0 rgba(0, 0, 0, 0.2)" - }, - ".line-highlight.line-highlight[data-end]:after": { - "background": "hsl(220, 13%, 26%)", - "color": "hsl(220, 14%, 71%)", - "padding": "0.1em 0.6em", - "borderRadius": "0.3em", - "boxShadow": "0 2px 0 0 rgba(0, 0, 0, 0.2)" - }, - "pre[id].linkable-line-numbers.linkable-line-numbers span.line-numbers-rows > span:hover:before": { - "backgroundColor": "hsla(220, 100%, 80%, 0.04)" - }, - ".line-numbers.line-numbers .line-numbers-rows": { - "borderRightColor": "hsla(220, 14%, 71%, 0.15)" - }, - ".command-line .command-line-prompt": { - "borderRightColor": "hsla(220, 14%, 71%, 0.15)" - }, - ".line-numbers .line-numbers-rows > span:before": { - "color": "hsl(220, 14%, 45%)" - }, - ".command-line .command-line-prompt > span:before": { - "color": "hsl(220, 14%, 45%)" - }, - ".rainbow-braces .token.token.punctuation.brace-level-1": { - "color": "hsl(355, 65%, 65%)" - }, - ".rainbow-braces .token.token.punctuation.brace-level-5": { - "color": "hsl(355, 65%, 65%)" - }, - ".rainbow-braces .token.token.punctuation.brace-level-9": { - "color": "hsl(355, 65%, 65%)" - }, - ".rainbow-braces .token.token.punctuation.brace-level-2": { - "color": "hsl(95, 38%, 62%)" - }, - ".rainbow-braces .token.token.punctuation.brace-level-6": { - "color": "hsl(95, 38%, 62%)" - }, - ".rainbow-braces .token.token.punctuation.brace-level-10": { - "color": "hsl(95, 38%, 62%)" - }, - ".rainbow-braces .token.token.punctuation.brace-level-3": { - "color": "hsl(207, 82%, 66%)" - }, - ".rainbow-braces .token.token.punctuation.brace-level-7": { - "color": "hsl(207, 82%, 66%)" - }, - ".rainbow-braces .token.token.punctuation.brace-level-11": { - "color": "hsl(207, 82%, 66%)" - }, - ".rainbow-braces .token.token.punctuation.brace-level-4": { - "color": "hsl(286, 60%, 67%)" - }, - ".rainbow-braces .token.token.punctuation.brace-level-8": { - "color": "hsl(286, 60%, 67%)" - }, - ".rainbow-braces .token.token.punctuation.brace-level-12": { - "color": "hsl(286, 60%, 67%)" - }, - "pre.diff-highlight > code .token.token.deleted:not(.prefix)": { - "backgroundColor": "hsla(353, 100%, 66%, 0.15)" - }, - "pre > code.diff-highlight .token.token.deleted:not(.prefix)": { - "backgroundColor": "hsla(353, 100%, 66%, 0.15)" - }, - "pre.diff-highlight > code .token.token.deleted:not(.prefix)::-moz-selection": { - "backgroundColor": "hsla(353, 95%, 66%, 0.25)" - }, - "pre.diff-highlight > code .token.token.deleted:not(.prefix) *::-moz-selection": { - "backgroundColor": "hsla(353, 95%, 66%, 0.25)" - }, - "pre > code.diff-highlight .token.token.deleted:not(.prefix)::-moz-selection": { - "backgroundColor": "hsla(353, 95%, 66%, 0.25)" - }, - "pre > code.diff-highlight .token.token.deleted:not(.prefix) *::-moz-selection": { - "backgroundColor": "hsla(353, 95%, 66%, 0.25)" - }, - "pre.diff-highlight > code .token.token.deleted:not(.prefix)::selection": { - "backgroundColor": "hsla(353, 95%, 66%, 0.25)" - }, - "pre.diff-highlight > code .token.token.deleted:not(.prefix) *::selection": { - "backgroundColor": "hsla(353, 95%, 66%, 0.25)" - }, - "pre > code.diff-highlight .token.token.deleted:not(.prefix)::selection": { - "backgroundColor": "hsla(353, 95%, 66%, 0.25)" - }, - "pre > code.diff-highlight .token.token.deleted:not(.prefix) *::selection": { - "backgroundColor": "hsla(353, 95%, 66%, 0.25)" - }, - "pre.diff-highlight > code .token.token.inserted:not(.prefix)": { - "backgroundColor": "hsla(137, 100%, 55%, 0.15)" - }, - "pre > code.diff-highlight .token.token.inserted:not(.prefix)": { - "backgroundColor": "hsla(137, 100%, 55%, 0.15)" - }, - "pre.diff-highlight > code .token.token.inserted:not(.prefix)::-moz-selection": { - "backgroundColor": "hsla(135, 73%, 55%, 0.25)" - }, - "pre.diff-highlight > code .token.token.inserted:not(.prefix) *::-moz-selection": { - "backgroundColor": "hsla(135, 73%, 55%, 0.25)" - }, - "pre > code.diff-highlight .token.token.inserted:not(.prefix)::-moz-selection": { - "backgroundColor": "hsla(135, 73%, 55%, 0.25)" - }, - "pre > code.diff-highlight .token.token.inserted:not(.prefix) *::-moz-selection": { - "backgroundColor": "hsla(135, 73%, 55%, 0.25)" - }, - "pre.diff-highlight > code .token.token.inserted:not(.prefix)::selection": { - "backgroundColor": "hsla(135, 73%, 55%, 0.25)" - }, - "pre.diff-highlight > code .token.token.inserted:not(.prefix) *::selection": { - "backgroundColor": "hsla(135, 73%, 55%, 0.25)" - }, - "pre > code.diff-highlight .token.token.inserted:not(.prefix)::selection": { - "backgroundColor": "hsla(135, 73%, 55%, 0.25)" - }, - "pre > code.diff-highlight .token.token.inserted:not(.prefix) *::selection": { - "backgroundColor": "hsla(135, 73%, 55%, 0.25)" - }, - ".prism-previewer.prism-previewer:before": { - "borderColor": "hsl(224, 13%, 17%)" - }, - ".prism-previewer-gradient.prism-previewer-gradient div": { - "borderColor": "hsl(224, 13%, 17%)", - "borderRadius": "0.3em" - }, - ".prism-previewer-color.prism-previewer-color:before": { - "borderRadius": "0.3em" - }, - ".prism-previewer-easing.prism-previewer-easing:before": { - "borderRadius": "0.3em" - }, - ".prism-previewer.prism-previewer:after": { - "borderTopColor": "hsl(224, 13%, 17%)" - }, - ".prism-previewer-flipped.prism-previewer-flipped.after": { - "borderBottomColor": "hsl(224, 13%, 17%)" - }, - ".prism-previewer-angle.prism-previewer-angle:before": { - "background": "hsl(219, 13%, 22%)" - }, - ".prism-previewer-time.prism-previewer-time:before": { - "background": "hsl(219, 13%, 22%)" - }, - ".prism-previewer-easing.prism-previewer-easing": { - "background": "hsl(219, 13%, 22%)" - }, - ".prism-previewer-angle.prism-previewer-angle circle": { - "stroke": "hsl(220, 14%, 71%)", - "strokeOpacity": "1" - }, - ".prism-previewer-time.prism-previewer-time circle": { - "stroke": "hsl(220, 14%, 71%)", - "strokeOpacity": "1" - }, - ".prism-previewer-easing.prism-previewer-easing circle": { - "stroke": "hsl(220, 14%, 71%)", - "fill": "transparent" - }, - ".prism-previewer-easing.prism-previewer-easing path": { - "stroke": "hsl(220, 14%, 71%)" - }, - ".prism-previewer-easing.prism-previewer-easing line": { - "stroke": "hsl(220, 14%, 71%)" - } -} + 'code[class*="language-"]': { + background: "hsl(220, 13%, 18%)", + color: "hsl(220, 14%, 71%)", + textShadow: "0 1px rgba(0, 0, 0, 0.3)", + fontFamily: + '"Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace', + direction: "ltr", + textAlign: "left", + whiteSpace: "pre", + wordSpacing: "normal", + wordBreak: "normal", + lineHeight: "1.5", + MozTabSize: "2", + OTabSize: "2", + tabSize: "2", + WebkitHyphens: "none", + MozHyphens: "none", + msHyphens: "none", + hyphens: "none", + }, + 'pre[class*="language-"]': { + background: "hsl(220, 13%, 18%)", + color: "hsl(220, 14%, 71%)", + textShadow: "0 1px rgba(0, 0, 0, 0.3)", + fontFamily: + '"Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace', + direction: "ltr", + textAlign: "left", + whiteSpace: "pre", + wordSpacing: "normal", + wordBreak: "normal", + lineHeight: "1.5", + MozTabSize: "2", + OTabSize: "2", + tabSize: "2", + WebkitHyphens: "none", + MozHyphens: "none", + msHyphens: "none", + hyphens: "none", + padding: "1em", + margin: "0.5em 0", + overflow: "auto", + borderRadius: "0.3em", + }, + 'code[class*="language-"]::-moz-selection': { + background: "hsl(220, 13%, 28%)", + color: "inherit", + textShadow: "none", + }, + 'code[class*="language-"] *::-moz-selection': { + background: "hsl(220, 13%, 28%)", + color: "inherit", + textShadow: "none", + }, + 'pre[class*="language-"] *::-moz-selection': { + background: "hsl(220, 13%, 28%)", + color: "inherit", + textShadow: "none", + }, + 'code[class*="language-"]::selection': { + background: "hsl(220, 13%, 28%)", + color: "inherit", + textShadow: "none", + }, + 'code[class*="language-"] *::selection': { + background: "hsl(220, 13%, 28%)", + color: "inherit", + textShadow: "none", + }, + 'pre[class*="language-"] *::selection': { + background: "hsl(220, 13%, 28%)", + color: "inherit", + textShadow: "none", + }, + ':not(pre) > code[class*="language-"]': { + padding: "0.2em 0.3em", + borderRadius: "0.3em", + whiteSpace: "normal", + }, + comment: { + color: "hsl(220, 10%, 40%)", + fontStyle: "italic", + }, + prolog: { + color: "hsl(220, 10%, 40%)", + }, + cdata: { + color: "hsl(220, 10%, 40%)", + }, + doctype: { + color: "hsl(220, 14%, 71%)", + }, + punctuation: { + color: "hsl(220, 14%, 71%)", + }, + entity: { + color: "hsl(220, 14%, 71%)", + cursor: "help", + }, + "attr-name": { + color: "hsl(29, 54%, 61%)", + }, + "class-name": { + color: "hsl(29, 54%, 61%)", + }, + boolean: { + color: "hsl(29, 54%, 61%)", + }, + constant: { + color: "hsl(29, 54%, 61%)", + }, + number: { + color: "hsl(29, 54%, 61%)", + }, + atrule: { + color: "hsl(29, 54%, 61%)", + }, + keyword: { + color: "hsl(286, 60%, 67%)", + }, + property: { + color: "hsl(355, 65%, 65%)", + }, + tag: { + color: "hsl(355, 65%, 65%)", + }, + symbol: { + color: "hsl(355, 65%, 65%)", + }, + deleted: { + color: "hsl(355, 65%, 65%)", + }, + important: { + color: "hsl(355, 65%, 65%)", + }, + selector: { + color: "hsl(95, 38%, 62%)", + }, + string: { + color: "hsl(95, 38%, 62%)", + }, + char: { + color: "hsl(95, 38%, 62%)", + }, + builtin: { + color: "hsl(95, 38%, 62%)", + }, + inserted: { + color: "hsl(95, 38%, 62%)", + }, + regex: { + color: "hsl(95, 38%, 62%)", + }, + "attr-value": { + color: "hsl(95, 38%, 62%)", + }, + "attr-value > .token.punctuation": { + color: "hsl(95, 38%, 62%)", + }, + variable: { + color: "hsl(207, 82%, 66%)", + }, + operator: { + color: "hsl(207, 82%, 66%)", + }, + function: { + color: "hsl(207, 82%, 66%)", + }, + url: { + color: "hsl(187, 47%, 55%)", + }, + "attr-value > .token.punctuation.attr-equals": { + color: "hsl(220, 14%, 71%)", + }, + "special-attr > .token.attr-value > .token.value.css": { + color: "hsl(220, 14%, 71%)", + }, + ".language-css .token.selector": { + color: "hsl(355, 65%, 65%)", + }, + ".language-css .token.property": { + color: "hsl(220, 14%, 71%)", + }, + ".language-css .token.function": { + color: "hsl(187, 47%, 55%)", + }, + ".language-css .token.url > .token.function": { + color: "hsl(187, 47%, 55%)", + }, + ".language-css .token.url > .token.string.url": { + color: "hsl(95, 38%, 62%)", + }, + ".language-css .token.important": { + color: "hsl(286, 60%, 67%)", + }, + ".language-css .token.atrule .token.rule": { + color: "hsl(286, 60%, 67%)", + }, + ".language-javascript .token.operator": { + color: "hsl(286, 60%, 67%)", + }, + ".language-javascript .token.template-string > .token.interpolation > .token.interpolation-punctuation.punctuation": + { + color: "hsl(5, 48%, 51%)", + }, + ".language-json .token.operator": { + color: "hsl(220, 14%, 71%)", + }, + ".language-json .token.null.keyword": { + color: "hsl(29, 54%, 61%)", + }, + ".language-markdown .token.url": { + color: "hsl(220, 14%, 71%)", + }, + ".language-markdown .token.url > .token.operator": { + color: "hsl(220, 14%, 71%)", + }, + ".language-markdown .token.url-reference.url > .token.string": { + color: "hsl(220, 14%, 71%)", + }, + ".language-markdown .token.url > .token.content": { + color: "hsl(207, 82%, 66%)", + }, + ".language-markdown .token.url > .token.url": { + color: "hsl(187, 47%, 55%)", + }, + ".language-markdown .token.url-reference.url": { + color: "hsl(187, 47%, 55%)", + }, + ".language-markdown .token.blockquote.punctuation": { + color: "hsl(220, 10%, 40%)", + fontStyle: "italic", + }, + ".language-markdown .token.hr.punctuation": { + color: "hsl(220, 10%, 40%)", + fontStyle: "italic", + }, + ".language-markdown .token.code-snippet": { + color: "hsl(95, 38%, 62%)", + }, + ".language-markdown .token.bold .token.content": { + color: "hsl(29, 54%, 61%)", + }, + ".language-markdown .token.italic .token.content": { + color: "hsl(286, 60%, 67%)", + }, + ".language-markdown .token.strike .token.content": { + color: "hsl(355, 65%, 65%)", + }, + ".language-markdown .token.strike .token.punctuation": { + color: "hsl(355, 65%, 65%)", + }, + ".language-markdown .token.list.punctuation": { + color: "hsl(355, 65%, 65%)", + }, + ".language-markdown .token.title.important > .token.punctuation": { + color: "hsl(355, 65%, 65%)", + }, + bold: { + fontWeight: "bold", + }, + italic: { + fontStyle: "italic", + }, + namespace: { + Opacity: "0.8", + }, + "token.tab:not(:empty):before": { + color: "hsla(220, 14%, 71%, 0.15)", + textShadow: "none", + }, + "token.cr:before": { + color: "hsla(220, 14%, 71%, 0.15)", + textShadow: "none", + }, + "token.lf:before": { + color: "hsla(220, 14%, 71%, 0.15)", + textShadow: "none", + }, + "token.space:before": { + color: "hsla(220, 14%, 71%, 0.15)", + textShadow: "none", + }, + "div.code-toolbar > .toolbar.toolbar > .toolbar-item": { + marginRight: "0.4em", + }, + "div.code-toolbar > .toolbar.toolbar > .toolbar-item > button": { + background: "hsl(220, 13%, 26%)", + color: "hsl(220, 9%, 55%)", + padding: "0.1em 0.4em", + borderRadius: "0.3em", + }, + "div.code-toolbar > .toolbar.toolbar > .toolbar-item > a": { + background: "hsl(220, 13%, 26%)", + color: "hsl(220, 9%, 55%)", + padding: "0.1em 0.4em", + borderRadius: "0.3em", + }, + "div.code-toolbar > .toolbar.toolbar > .toolbar-item > span": { + background: "hsl(220, 13%, 26%)", + color: "hsl(220, 9%, 55%)", + padding: "0.1em 0.4em", + borderRadius: "0.3em", + }, + "div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:hover": { + background: "hsl(220, 13%, 28%)", + color: "hsl(220, 14%, 71%)", + }, + "div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:focus": { + background: "hsl(220, 13%, 28%)", + color: "hsl(220, 14%, 71%)", + }, + "div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:hover": { + background: "hsl(220, 13%, 28%)", + color: "hsl(220, 14%, 71%)", + }, + "div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:focus": { + background: "hsl(220, 13%, 28%)", + color: "hsl(220, 14%, 71%)", + }, + "div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:hover": { + background: "hsl(220, 13%, 28%)", + color: "hsl(220, 14%, 71%)", + }, + "div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus": { + background: "hsl(220, 13%, 28%)", + color: "hsl(220, 14%, 71%)", + }, + ".line-highlight.line-highlight": { + background: "hsla(220, 100%, 80%, 0.04)", + }, + ".line-highlight.line-highlight:before": { + background: "hsl(220, 13%, 26%)", + color: "hsl(220, 14%, 71%)", + padding: "0.1em 0.6em", + borderRadius: "0.3em", + boxShadow: "0 2px 0 0 rgba(0, 0, 0, 0.2)", + }, + ".line-highlight.line-highlight[data-end]:after": { + background: "hsl(220, 13%, 26%)", + color: "hsl(220, 14%, 71%)", + padding: "0.1em 0.6em", + borderRadius: "0.3em", + boxShadow: "0 2px 0 0 rgba(0, 0, 0, 0.2)", + }, + "pre[id].linkable-line-numbers.linkable-line-numbers span.line-numbers-rows > span:hover:before": + { + backgroundColor: "hsla(220, 100%, 80%, 0.04)", + }, + ".line-numbers.line-numbers .line-numbers-rows": { + borderRightColor: "hsla(220, 14%, 71%, 0.15)", + }, + ".command-line .command-line-prompt": { + borderRightColor: "hsla(220, 14%, 71%, 0.15)", + }, + ".line-numbers .line-numbers-rows > span:before": { + color: "hsl(220, 14%, 45%)", + }, + ".command-line .command-line-prompt > span:before": { + color: "hsl(220, 14%, 45%)", + }, + ".rainbow-braces .token.token.punctuation.brace-level-1": { + color: "hsl(355, 65%, 65%)", + }, + ".rainbow-braces .token.token.punctuation.brace-level-5": { + color: "hsl(355, 65%, 65%)", + }, + ".rainbow-braces .token.token.punctuation.brace-level-9": { + color: "hsl(355, 65%, 65%)", + }, + ".rainbow-braces .token.token.punctuation.brace-level-2": { + color: "hsl(95, 38%, 62%)", + }, + ".rainbow-braces .token.token.punctuation.brace-level-6": { + color: "hsl(95, 38%, 62%)", + }, + ".rainbow-braces .token.token.punctuation.brace-level-10": { + color: "hsl(95, 38%, 62%)", + }, + ".rainbow-braces .token.token.punctuation.brace-level-3": { + color: "hsl(207, 82%, 66%)", + }, + ".rainbow-braces .token.token.punctuation.brace-level-7": { + color: "hsl(207, 82%, 66%)", + }, + ".rainbow-braces .token.token.punctuation.brace-level-11": { + color: "hsl(207, 82%, 66%)", + }, + ".rainbow-braces .token.token.punctuation.brace-level-4": { + color: "hsl(286, 60%, 67%)", + }, + ".rainbow-braces .token.token.punctuation.brace-level-8": { + color: "hsl(286, 60%, 67%)", + }, + ".rainbow-braces .token.token.punctuation.brace-level-12": { + color: "hsl(286, 60%, 67%)", + }, + "pre.diff-highlight > code .token.token.deleted:not(.prefix)": { + backgroundColor: "hsla(353, 100%, 66%, 0.15)", + }, + "pre > code.diff-highlight .token.token.deleted:not(.prefix)": { + backgroundColor: "hsla(353, 100%, 66%, 0.15)", + }, + "pre.diff-highlight > code .token.token.deleted:not(.prefix)::-moz-selection": + { + backgroundColor: "hsla(353, 95%, 66%, 0.25)", + }, + "pre.diff-highlight > code .token.token.deleted:not(.prefix) *::-moz-selection": + { + backgroundColor: "hsla(353, 95%, 66%, 0.25)", + }, + "pre > code.diff-highlight .token.token.deleted:not(.prefix)::-moz-selection": + { + backgroundColor: "hsla(353, 95%, 66%, 0.25)", + }, + "pre > code.diff-highlight .token.token.deleted:not(.prefix) *::-moz-selection": + { + backgroundColor: "hsla(353, 95%, 66%, 0.25)", + }, + "pre.diff-highlight > code .token.token.deleted:not(.prefix)::selection": { + backgroundColor: "hsla(353, 95%, 66%, 0.25)", + }, + "pre.diff-highlight > code .token.token.deleted:not(.prefix) *::selection": { + backgroundColor: "hsla(353, 95%, 66%, 0.25)", + }, + "pre > code.diff-highlight .token.token.deleted:not(.prefix)::selection": { + backgroundColor: "hsla(353, 95%, 66%, 0.25)", + }, + "pre > code.diff-highlight .token.token.deleted:not(.prefix) *::selection": { + backgroundColor: "hsla(353, 95%, 66%, 0.25)", + }, + "pre.diff-highlight > code .token.token.inserted:not(.prefix)": { + backgroundColor: "hsla(137, 100%, 55%, 0.15)", + }, + "pre > code.diff-highlight .token.token.inserted:not(.prefix)": { + backgroundColor: "hsla(137, 100%, 55%, 0.15)", + }, + "pre.diff-highlight > code .token.token.inserted:not(.prefix)::-moz-selection": + { + backgroundColor: "hsla(135, 73%, 55%, 0.25)", + }, + "pre.diff-highlight > code .token.token.inserted:not(.prefix) *::-moz-selection": + { + backgroundColor: "hsla(135, 73%, 55%, 0.25)", + }, + "pre > code.diff-highlight .token.token.inserted:not(.prefix)::-moz-selection": + { + backgroundColor: "hsla(135, 73%, 55%, 0.25)", + }, + "pre > code.diff-highlight .token.token.inserted:not(.prefix) *::-moz-selection": + { + backgroundColor: "hsla(135, 73%, 55%, 0.25)", + }, + "pre.diff-highlight > code .token.token.inserted:not(.prefix)::selection": { + backgroundColor: "hsla(135, 73%, 55%, 0.25)", + }, + "pre.diff-highlight > code .token.token.inserted:not(.prefix) *::selection": { + backgroundColor: "hsla(135, 73%, 55%, 0.25)", + }, + "pre > code.diff-highlight .token.token.inserted:not(.prefix)::selection": { + backgroundColor: "hsla(135, 73%, 55%, 0.25)", + }, + "pre > code.diff-highlight .token.token.inserted:not(.prefix) *::selection": { + backgroundColor: "hsla(135, 73%, 55%, 0.25)", + }, + ".prism-previewer.prism-previewer:before": { + borderColor: "hsl(224, 13%, 17%)", + }, + ".prism-previewer-gradient.prism-previewer-gradient div": { + borderColor: "hsl(224, 13%, 17%)", + borderRadius: "0.3em", + }, + ".prism-previewer-color.prism-previewer-color:before": { + borderRadius: "0.3em", + }, + ".prism-previewer-easing.prism-previewer-easing:before": { + borderRadius: "0.3em", + }, + ".prism-previewer.prism-previewer:after": { + borderTopColor: "hsl(224, 13%, 17%)", + }, + ".prism-previewer-flipped.prism-previewer-flipped.after": { + borderBottomColor: "hsl(224, 13%, 17%)", + }, + ".prism-previewer-angle.prism-previewer-angle:before": { + background: "hsl(219, 13%, 22%)", + }, + ".prism-previewer-time.prism-previewer-time:before": { + background: "hsl(219, 13%, 22%)", + }, + ".prism-previewer-easing.prism-previewer-easing": { + background: "hsl(219, 13%, 22%)", + }, + ".prism-previewer-angle.prism-previewer-angle circle": { + stroke: "hsl(220, 14%, 71%)", + strokeOpacity: "1", + }, + ".prism-previewer-time.prism-previewer-time circle": { + stroke: "hsl(220, 14%, 71%)", + strokeOpacity: "1", + }, + ".prism-previewer-easing.prism-previewer-easing circle": { + stroke: "hsl(220, 14%, 71%)", + fill: "transparent", + }, + ".prism-previewer-easing.prism-previewer-easing path": { + stroke: "hsl(220, 14%, 71%)", + }, + ".prism-previewer-easing.prism-previewer-easing line": { + stroke: "hsl(220, 14%, 71%)", + }, +}; diff --git a/pynecone/.templates/web/utils/state.js b/pynecone/.templates/web/utils/state.js index 356eb17d5..18158e486 100644 --- a/pynecone/.templates/web/utils/state.js +++ b/pynecone/.templates/web/utils/state.js @@ -1,8 +1,16 @@ -import axios from "axios"; +// State management for Pynecone web apps. +// Global variable to hold the token. let token; + +// Key for the token in the session storage. const TOKEN_KEY = "token"; +/** + * Generate a UUID (Used for session tokens). + * Taken from: https://stackoverflow.com/questions/105034/how-do-i-create-a-guid-uuid + * @returns A UUID. + */ const generateUUID = () => { let d = new Date().getTime(), d2 = (performance && performance.now && performance.now() * 1000) || 0; @@ -19,6 +27,10 @@ const generateUUID = () => { }); }; +/** + * Get the token for the current session. + * @returns The token. + */ export const getToken = () => { if (token) { return token; @@ -32,6 +44,11 @@ export const getToken = () => { return token; }; +/** + * Apply a delta to the state. + * @param state The state to apply the delta to. + * @param delta The delta to apply. + */ export const applyDelta = (state, delta) => { for (const substate in delta) { let s = state; @@ -45,53 +62,86 @@ export const applyDelta = (state, delta) => { } }; -export const applyEvent = async (state, event, endpoint, router) => { +/** + * Send an event to the server. + * @param event The event to send. + * @param router The router object. + * @param socket The socket object to send the event on. + */ +export const applyEvent = async (event, router, socket) => { // Handle special events if (event.name == "_redirect") { router.push(event.payload.path); - return []; + return; } if (event.name == "_console") { console.log(event.payload.message); - return []; + return; } if (event.name == "_alert") { alert(event.payload.message); - return []; + return; } + // Send the event to the server. event.token = getToken(); - const update = (await axios.post(endpoint, event)).data; - applyDelta(state, update.delta); - return update.events; + if (socket) { + socket.send(JSON.stringify(event)); + } }; -export const updateState = async ( - state, - result, - setResult, - endpoint, - router -) => { +/** + * Process an event off the event queue. + * @param state The state with the event queue. + * @param result The current result + * @param setResult The function to set the result. + * @param router The router object. + * @param socket The socket object to send the event on. + */ +export const updateState = async (state, result, setResult, router, socket) => { + // If we are already processing an event, or there are no events to process, return. if (result.processing || state.events.length == 0) { return; } + + // If the socket is not ready, return. + if (!socket.readyState) { + return; + } + + // Process the next event in the queue. setResult({ ...result, processing: true }); - const events = await applyEvent( - state, - state.events.shift(), - endpoint, - router - ); - setResult({ - processing: true, - state: state, - events: events, - }); + await applyEvent(state.events.shift(), router, socket); }; +/** + * Connect to a websocket and set the handlers. + * @param socket The socket object to connect. + * @param state The state object to apply the deltas to. + * @param setResult The function to set the result. + * @param endpoint The endpoint to connect to. + */ +export const connect = async (socket, state, setResult, endpoint) => { + socket.current = new WebSocket(endpoint); + socket.current.onmessage = function (update) { + update = JSON.parse(update.data); + applyDelta(state, update.delta); + setResult({ + processing: false, + state: state, + events: update.events, + }); + }; +}; + +/** + * Create an event object. + * @param name The name of the event. + * @param payload The payload of the event. + * @returns The event object. + */ export const E = (name, payload) => { return { name, payload }; }; diff --git a/pynecone/app.py b/pynecone/app.py index 1447a6031..1077d7a61 100644 --- a/pynecone/app.py +++ b/pynecone/app.py @@ -1,10 +1,8 @@ """The main Pynecone app.""" -import os -import re from typing import Any, Callable, Coroutine, Dict, List, Optional, Tuple, Type, Union -import fastapi +from fastapi import FastAPI, WebSocket from fastapi.middleware import cors from pynecone import constants, utils @@ -32,7 +30,7 @@ class App(Base): stylesheets: List[str] = [] # The backend API object. - api: fastapi.FastAPI = None # type: ignore + api: FastAPI = None # type: ignore # The state class to use for the app. state: Type[State] = DefaultState @@ -62,7 +60,7 @@ class App(Base): self.state_manager.setup(state=self.state) # Set up the API. - self.api = fastapi.FastAPI() + self.api = FastAPI() self.add_cors() self.add_default_endpoints() @@ -74,7 +72,7 @@ class App(Base): """ return f"" - def __call__(self) -> fastapi.FastAPI: + def __call__(self) -> FastAPI: """Run the backend api instance. Returns: @@ -85,10 +83,10 @@ class App(Base): def add_default_endpoints(self): """Add the default endpoints.""" # To test the server. - self.get(str(constants.Endpoint.PING))(_ping) + self.api.get(str(constants.Endpoint.PING))(_ping) # To make state changes. - self.post(str(constants.Endpoint.EVENT))(_event(app=self)) + self.api.websocket(str(constants.Endpoint.EVENT))(_event(app=self)) def add_cors(self): """Add CORS middleware to the app.""" @@ -99,32 +97,6 @@ class App(Base): allow_headers=["*"], ) - def get(self, path: str, *args, **kwargs) -> Callable: - """Register a get request. - - Args: - path: The endpoint path to link to the request. - *args: Args to pass to the request. - **kwargs: Kwargs to pass to the request. - - Returns: - A decorator to handle the request. - """ - return self.api.get(path, *args, **kwargs) - - def post(self, path: str, *args, **kwargs) -> Callable: - """Register a post request. - - Args: - path: The endpoint path to link to the request. - *args: Args to pass to the request. - **kwargs: Kwargs to pass to the request. - - Returns: - A decorator to handle the request. - """ - return self.api.post(path, *args, **kwargs) - def preprocess(self, state: State, event: Event) -> Optional[Delta]: """Preprocess the event. @@ -324,35 +296,65 @@ async def _ping() -> str: return "pong" -def _event(app: App) -> Reducer: - """Create an event reducer to modify the state. +def _event(app: App): + """Websocket endpoint for events. Args: - app: The app to modify the state of. + app: The app to add the endpoint to. Returns: - A handler that takes in an event and modifies the state. + The websocket endpoint. """ - async def process(event: Event) -> StateUpdate: - # Get the state for the session. - state = app.get_state(event.token) + async def ws(websocket: WebSocket): + """Create websocket endpoint. - # Preprocess the event. - pre = app.preprocess(state, event) - if pre is not None: - return StateUpdate(delta=pre) + Args: + websocket: The websocket sending events. + """ + # Accept the connection. + await websocket.accept() - # Apply the event to the state. - update = await state.process(event) - app.set_state(event.token, state) + # Process events until the connection is closed. + while True: + # Get the event. + event = Event.parse_raw(await websocket.receive_text()) - # Postprocess the event. - post = app.postprocess(state, event, update.delta) - if post is not None: - return StateUpdate(delta=post) + # Process the event. + update = await process(app, event) - # Return the delta. - return update + # Send the update. + await websocket.send_text(update.json()) - return process + return ws + + +async def process(app: App, event: Event) -> StateUpdate: + """Process an event. + + Args: + app: The app to process the event for. + event: The event to process. + + Returns: + The state update after processing the event. + """ + # Get the state for the session. + state = app.get_state(event.token) + + # Preprocess the event. + pre = app.preprocess(state, event) + if pre is not None: + return StateUpdate(delta=pre) + + # Apply the event to the state. + update = await state.process(event) + app.set_state(event.token, state) + + # Postprocess the event. + post = app.postprocess(state, event, update.delta) + if post is not None: + return StateUpdate(delta=post) + + # Return the update. + return update diff --git a/pynecone/compiler/compiler.py b/pynecone/compiler/compiler.py index 1f9635f07..5dea09c1c 100644 --- a/pynecone/compiler/compiler.py +++ b/pynecone/compiler/compiler.py @@ -10,9 +10,9 @@ from pynecone.state import State # Imports to be included in every Pynecone app. DEFAULT_IMPORTS: ImportDict = { - "react": {"useEffect", "useState"}, + "react": {"useEffect", "useRef", "useState"}, "next/router": {"useRouter"}, - f"/{constants.STATE_PATH}": {"updateState", "E"}, + f"/{constants.STATE_PATH}": {"connect", "updateState", "E"}, "": {"focus-visible/dist/focus-visible"}, } diff --git a/pynecone/compiler/templates.py b/pynecone/compiler/templates.py index a9cdce124..143cbb5ce 100644 --- a/pynecone/compiler/templates.py +++ b/pynecone/compiler/templates.py @@ -136,12 +136,16 @@ EVENT_FN = join( ROUTER = constants.ROUTER RESULT = constants.RESULT PROCESSING = constants.PROCESSING +SOCKET = constants.SOCKET STATE = constants.STATE EVENTS = constants.EVENTS SET_RESULT = format_state_setter(RESULT) USE_EFFECT = join( [ "useEffect(() => {{", + f" if (!{SOCKET}.current) {{{{", + f" connect({SOCKET}, {{state}}, {SET_RESULT}, {EVENT_ENDPOINT})", + " }}", " const update = async () => {{", f" if ({RESULT}.{STATE} != null) {{{{", f" {{set_state}}({{{{", @@ -154,7 +158,7 @@ USE_EFFECT = join( f" {PROCESSING}: false,", " }})", " }}", - f" await updateState({{state}}, {RESULT}, {SET_RESULT}, {EVENT_ENDPOINT}, {ROUTER})", + f" await updateState({{state}}, {RESULT}, {SET_RESULT}, {ROUTER}, {SOCKET}.current)", " }}", " update()", "}})", @@ -163,3 +167,6 @@ USE_EFFECT = join( # Routing ROUTER = f"const {constants.ROUTER} = useRouter()" + +# Sockets. +SOCKET = "const socket = useRef(null)" diff --git a/pynecone/compiler/utils.py b/pynecone/compiler/utils.py index 284c66a2d..f355a3b22 100644 --- a/pynecone/compiler/utils.py +++ b/pynecone/compiler/utils.py @@ -94,9 +94,6 @@ def compile_constants() -> str: ) -import plotly.graph_objects as go - - def compile_state(state: Type[State]) -> str: """Compile the state of the app. @@ -126,7 +123,8 @@ def compile_state(state: Type[State]) -> str: initial_state=json.dumps(initial_result), ) router = templates.ROUTER - return templates.join([synced_state, result, router]) + socket = templates.SOCKET + return templates.join([synced_state, result, router, socket]) def compile_events(state: Type[State]) -> str: diff --git a/pynecone/constants.py b/pynecone/constants.py index 57efa6a7d..40051cad3 100644 --- a/pynecone/constants.py +++ b/pynecone/constants.py @@ -74,6 +74,8 @@ APP_VAR = "app" API_VAR = "api" # The name of the router variable. ROUTER = "router" +# The name of the socket variable. +SOCKET = "socket" # The name of the variable to hold API results. RESULT = "result" # The name of the process variable. @@ -146,7 +148,17 @@ class Endpoint(Enum): Returns: The full URL for the endpoint. """ + # Import here to avoid circular imports. from pynecone import utils + # Get the API URL from the config. config = utils.get_config() - return "".join([config.api_url, str(self)]) + url = "".join([config.api_url, str(self)]) + + # The event endpoint is a websocket. + if self == Endpoint.EVENT: + # Replace the protocol with ws. + url = url.replace("https://", "ws://").replace("http://", "ws://") + + # Return the url. + return url diff --git a/pyproject.toml b/pyproject.toml index 8c40c0297..5c9821b3e 100644 --- a/pyproject.toml +++ b/pyproject.toml @@ -34,6 +34,7 @@ uvicorn = "^0.20.0" rich = "^12.6.0" redis = "^4.3.5" httpx = "^0.23.1" +websockets = "^10.4" [tool.poetry.dev-dependencies] pytest = "^7.1.2"