A repository full of Reflex example apps.
reflex-dev / reflex-examples Goto Github PK
View Code? Open in Web Editor NEWA repository full of Reflex example apps.
A repository full of Reflex example apps.
When call pc run
, there is the following issue
0.1.29
and 0.1.28
both have this issue.
Warning: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.
at textarea
at /Users/milochen/git/py-webapp/sales/.web/node_modules/@emotion/react/dist/emotion-element-b63ca7c6.cjs.dev.js:51:25
at /Users/milochen/git/py-webapp/sales/.web/node_modules/@chakra-ui/textarea/dist/chakra-ui-textarea.cjs.dev.js:70:23
at div
at /Users/milochen/git/py-webapp/sales/.web/node_modules/@emotion/react/dist/emotion-element-b63ca7c6.cjs.dev.js:51:25
at /Users/milochen/git/py-webapp/sales/.web/node_modules/@chakra-ui/layout/dist/chakra-ui-layout.cjs.dev.js:910:24
at VStack
at div
at /Users/milochen/git/py-webapp/sales/.web/node_modules/@emotion/react/dist/emotion-element-b63ca7c6.cjs.dev.js:51:25
at /Users/milochen/git/py-webapp/sales/.web/node_modules/@chakra-ui/layout/dist/chakra-ui-layout.cjs.dev.js:910:24
at VStack
at div
at /Users/milochen/git/py-webapp/sales/.web/node_modules/@emotion/react/dist/emotion-element-b63ca7c6.cjs.dev.js:51:25
at Component (webpack-internal:///./pages/index.js:38:88)
at EnvironmentProvider (/Users/milochen/git/py-webapp/sales/.web/node_modules/@chakra-ui/react-env/dist/chakra-ui-react-env.cjs.dev.js:120:24)
at ColorModeProvider (/Users/milochen/git/py-webapp/sales/.web/node_modules/@chakra-ui/color-mode/dist/chakra-ui-color-mode.cjs.dev.js:228:21)
at ThemeProvider (/Users/milochen/git/py-webapp/sales/.web/node_modules/@emotion/react/dist/emotion-element-b63ca7c6.cjs.dev.js:106:21)
at ThemeProvider (/Users/milochen/git/py-webapp/sales/.web/node_modules/@chakra-ui/system/dist/chakra-ui-system.cjs.dev.js:57:27)
at /Users/milochen/git/py-webapp/sales/.web/node_modules/@chakra-ui/hooks/dist/chakra-ui-hooks.cjs.dev.js:265:23
at /Users/milochen/git/py-webapp/sales/.web/node_modules/@chakra-ui/hooks/dist/chakra-ui-hooks.cjs.dev.js:265:23
at ChakraProvider (/Users/milochen/git/py-webapp/sales/.web/node_modules/@chakra-ui/provider/dist/chakra-ui-provider.cjs.dev.js:40:24)
at MyApp (webpack-internal:///./pages/_app.js:23:18)
at StyleRegistry (/Users/milochen/git/py-webapp/sales/.web/node_modules/styled-jsx/dist/index/index.js:448:36)
at AppContainer (/Users/milochen/git/py-webapp/sales/.web/node_modules/next/dist/server/render.js:298:29)
at AppContainerWithIsomorphicFiberStructure (/Users/milochen/git/py-webapp/sales/.web/node_modules/next/dist/server/render.js:327:57)
at div
at Body (/Users/milochen/git/py-webapp/sales/.web/node_modules/next/dist/server/render.js:614:21)
Warning: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.
at textarea
at /Users/milochen/git/py-webapp/sales/.web/node_modules/@emotion/react/dist/emotion-element-b63ca7c6.cjs.dev.js:51:25
at /Users/milochen/git/py-webapp/sales/.web/node_modules/@chakra-ui/textarea/dist/chakra-ui-textarea.cjs.dev.js:70:23
at div
at /Users/milochen/git/py-webapp/sales/.web/node_modules/@emotion/react/dist/emotion-element-b63ca7c6.cjs.dev.js:51:25
at /Users/milochen/git/py-webapp/sales/.web/node_modules/@chakra-ui/layout/dist/chakra-ui-layout.cjs.dev.js:910:24
at VStack
at div
at /Users/milochen/git/py-webapp/sales/.web/node_modules/@emotion/react/dist/emotion-element-b63ca7c6.cjs.dev.js:51:25
at /Users/milochen/git/py-webapp/sales/.web/node_modules/@chakra-ui/layout/dist/chakra-ui-layout.cjs.dev.js:910:24
at VStack
at div
at /Users/milochen/git/py-webapp/sales/.web/node_modules/@emotion/react/dist/emotion-element-b63ca7c6.cjs.dev.js:51:25
at Component (webpack-internal:///./pages/index.js:38:88)
at EnvironmentProvider (/Users/milochen/git/py-webapp/sales/.web/node_modules/@chakra-ui/react-env/dist/chakra-ui-react-env.cjs.dev.js:120:24)
at ColorModeProvider (/Users/milochen/git/py-webapp/sales/.web/node_modules/@chakra-ui/color-mode/dist/chakra-ui-color-mode.cjs.dev.js:228:21)
at ThemeProvider (/Users/milochen/git/py-webapp/sales/.web/node_modules/@emotion/react/dist/emotion-element-b63ca7c6.cjs.dev.js:106:21)
at ThemeProvider (/Users/milochen/git/py-webapp/sales/.web/node_modules/@chakra-ui/system/dist/chakra-ui-system.cjs.dev.js:57:27)
at /Users/milochen/git/py-webapp/sales/.web/node_modules/@chakra-ui/hooks/dist/chakra-ui-hooks.cjs.dev.js:265:23
at /Users/milochen/git/py-webapp/sales/.web/node_modules/@chakra-ui/hooks/dist/chakra-ui-hooks.cjs.dev.js:265:23
at ChakraProvider (/Users/milochen/git/py-webapp/sales/.web/node_modules/@chakra-ui/provider/dist/chakra-ui-provider.cjs.dev.js:40:24)
at MyApp (webpack-internal:///./pages/_app.js:23:18)
at StyleRegistry (/Users/milochen/git/py-webapp/sales/.web/node_modules/styled-jsx/dist/index/index.js:448:36)
at AppContainer (/Users/milochen/git/py-webapp/sales/.web/node_modules/next/dist/server/render.js:298:29)
at AppContainerWithIsomorphicFiberStructure (/Users/milochen/git/py-webapp/sales/.web/node_modules/next/dist/server/render.js:327:57)
at div
at Body (/Users/milochen/git/py-webapp/sales/.web/node_modules/next/dist/server/render.js:614:21)
This testing is in pynecone 0.1.28 environment only right now.
The original page is the following.
Typing the input field and clicking Add two times, you can see the following page
The expected behavior should be one of these two cases.
We can use the clock example to test
pc run --backend-port=3088
The frontend's code is still connect the to the backend port=8000
Get warning log in sales example with pynecone==0.1.28
Warning message and find out the frontend appears to miss the light. it doesn't have some moving light in new version after 0.1.24.
The light is from the following code. It is between the heading text and textarea.
pc.cond(
State.gen_response,
pc.progress(is_indeterminate=True, color="blue", width="100%"),
pc.progress(value=0, width="100%"),
),
And the warning message is the following
Warning: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.
at textarea
at /Users/milochen/git/py-webapp/sales/.web/node_modules/@emotion/react/dist/emotion-element-b63ca7c6.cjs.dev.js:51:25
at /Users/milochen/git/py-webapp/sales/.web/node_modules/@chakra-ui/textarea/dist/chakra-ui-textarea.cjs.dev.js:70:23
at div
at /Users/milochen/git/py-webapp/sales/.web/node_modules/@emotion/react/dist/emotion-element-b63ca7c6.cjs.dev.js:51:25
at /Users/milochen/git/py-webapp/sales/.web/node_modules/@chakra-ui/layout/dist/chakra-ui-layout.cjs.dev.js:910:24
at VStack
at div
at /Users/milochen/git/py-webapp/sales/.web/node_modules/@emotion/react/dist/emotion-element-b63ca7c6.cjs.dev.js:51:25
at /Users/milochen/git/py-webapp/sales/.web/node_modules/@chakra-ui/layout/dist/chakra-ui-layout.cjs.dev.js:910:24
at VStack
at div
at /Users/milochen/git/py-webapp/sales/.web/node_modules/@emotion/react/dist/emotion-element-b63ca7c6.cjs.dev.js:51:25
at Component (webpack-internal:///./pages/index.js:38:88)
at EnvironmentProvider (/Users/milochen/git/py-webapp/sales/.web/node_modules/@chakra-ui/react-env/dist/chakra-ui-react-env.cjs.dev.js:120:24)
at ColorModeProvider (/Users/milochen/git/py-webapp/sales/.web/node_modules/@chakra-ui/color-mode/dist/chakra-ui-color-mode.cjs.dev.js:228:21)
at ThemeProvider (/Users/milochen/git/py-webapp/sales/.web/node_modules/@emotion/react/dist/emotion-element-b63ca7c6.cjs.dev.js:106:21)
at ThemeProvider (/Users/milochen/git/py-webapp/sales/.web/node_modules/@chakra-ui/system/dist/chakra-ui-system.cjs.dev.js:57:27)
at /Users/milochen/git/py-webapp/sales/.web/node_modules/@chakra-ui/hooks/dist/chakra-ui-hooks.cjs.dev.js:265:23
at /Users/milochen/git/py-webapp/sales/.web/node_modules/@chakra-ui/hooks/dist/chakra-ui-hooks.cjs.dev.js:265:23
at ChakraProvider (/Users/milochen/git/py-webapp/sales/.web/node_modules/@chakra-ui/provider/dist/chakra-ui-provider.cjs.dev.js:40:24)
at MyApp (webpack-internal:///./pages/_app.js:23:18)
at StyleRegistry (/Users/milochen/git/py-webapp/sales/.web/node_modules/styled-jsx/dist/index/index.js:448:36)
at AppContainer (/Users/milochen/git/py-webapp/sales/.web/node_modules/next/dist/server/render.js:298:29)
at AppContainerWithIsomorphicFiberStructure (/Users/milochen/git/py-webapp/sales/.web/node_modules/next/dist/server/render.js:327:57)
at div
at Body (/Users/milochen/git/py-webapp/sales/.web/node_modules/next/dist/server/render.js:614:21)
Warning: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.
at textarea
at /Users/milochen/git/py-webapp/sales/.web/node_modules/@emotion/react/dist/emotion-element-b63ca7c6.cjs.dev.js:51:25
at /Users/milochen/git/py-webapp/sales/.web/node_modules/@chakra-ui/textarea/dist/chakra-ui-textarea.cjs.dev.js:70:23
at div
at /Users/milochen/git/py-webapp/sales/.web/node_modules/@emotion/react/dist/emotion-element-b63ca7c6.cjs.dev.js:51:25
at /Users/milochen/git/py-webapp/sales/.web/node_modules/@chakra-ui/layout/dist/chakra-ui-layout.cjs.dev.js:910:24
at VStack
at div
at /Users/milochen/git/py-webapp/sales/.web/node_modules/@emotion/react/dist/emotion-element-b63ca7c6.cjs.dev.js:51:25
at /Users/milochen/git/py-webapp/sales/.web/node_modules/@chakra-ui/layout/dist/chakra-ui-layout.cjs.dev.js:910:24
at VStack
at div
at /Users/milochen/git/py-webapp/sales/.web/node_modules/@emotion/react/dist/emotion-element-b63ca7c6.cjs.dev.js:51:25
at Component (webpack-internal:///./pages/index.js:38:88)
at EnvironmentProvider (/Users/milochen/git/py-webapp/sales/.web/node_modules/@chakra-ui/react-env/dist/chakra-ui-react-env.cjs.dev.js:120:24)
at ColorModeProvider (/Users/milochen/git/py-webapp/sales/.web/node_modules/@chakra-ui/color-mode/dist/chakra-ui-color-mode.cjs.dev.js:228:21)
at ThemeProvider (/Users/milochen/git/py-webapp/sales/.web/node_modules/@emotion/react/dist/emotion-element-b63ca7c6.cjs.dev.js:106:21)
at ThemeProvider (/Users/milochen/git/py-webapp/sales/.web/node_modules/@chakra-ui/system/dist/chakra-ui-system.cjs.dev.js:57:27)
at /Users/milochen/git/py-webapp/sales/.web/node_modules/@chakra-ui/hooks/dist/chakra-ui-hooks.cjs.dev.js:265:23
at /Users/milochen/git/py-webapp/sales/.web/node_modules/@chakra-ui/hooks/dist/chakra-ui-hooks.cjs.dev.js:265:23
at ChakraProvider (/Users/milochen/git/py-webapp/sales/.web/node_modules/@chakra-ui/provider/dist/chakra-ui-provider.cjs.dev.js:40:24)
at MyApp (webpack-internal:///./pages/_app.js:23:18)
at StyleRegistry (/Users/milochen/git/py-webapp/sales/.web/node_modules/styled-jsx/dist/index/index.js:448:36)
at AppContainer (/Users/milochen/git/py-webapp/sales/.web/node_modules/next/dist/server/render.js:298:29)
at AppContainerWithIsomorphicFiberStructure (/Users/milochen/git/py-webapp/sales/.web/node_modules/next/dist/server/render.js:327:57)
at div
at Body (/Users/milochen/git/py-webapp/sales/.web/node_modules/next/dist/server/render.js:614:21)
The following picture is the working GUI but not work on its center line.
With reference to this demo I am able to login without entering any email or password and when I try to sign up without any email or password, I get the message "username already exists".
This could be an issue where any checks were not placed in the signup
function allowing empty values "" for username and password to be entered in the database. Please see if you can fix this and maybe even add a warning in the docs to alert the users about this potential pitfall.
As noted in reflex-dev/reflex#856 (comment), we should consider adding tests for the example projects.
At the very least, we should be able to pc init
and pc export
every project without errors.
Down the road it would be amazing to have a pytest-pynecone
plugin that would help developers test their full stack apps end-to-end.
In twitter sample, the table is defined likethis:
class User(pc.Model, table=True):
"""A table of Users."""
username: str
password: str
and in login scripts, the function looks like:
with pc.session() as session:
user = session.exec(
User.select.where(User.username == self.username)
and it runs into an error:
AttributeError: 'property' object has no attribute
I think the source code model.Model.select is something wrong.Can you help?
The twitter example is working well in the following condition.
pynecone==0.1.24
bun==5.9
node==20.0.0
After using 0.1.27
pynecone==0.1.27
bun==5.9
node==20.0.0
When we type in the search field,
We have the following error from the log.
Traceback (most recent call last):
File "/Users/milochen/anaconda3/envs/pynecone-examples/lib/python3.11/site-packages/pynecone/state.py", line 655, in _process_event
events = fn(**payload)
^^^^^^^^^^^^^
File "/Users/milochen/git/py-webapp/twitter/twitter/home.py", line 51, in set_search
return self.get_tweets()
^^^^^^^^^^^^^^^^^
TypeError: HomeState.get_tweets() missing 1 required positional argument: 'self'
If you click Tweet button, it also has the bug too.
And it debug message is the following
Traceback (most recent call last):
File "/Users/milochen/anaconda3/envs/pynecone-examples/lib/python3.11/site-packages/pynecone/state.py", line 655, in _process_event
events = fn(**payload)
^^^^^^^^^^^^^
File "/Users/milochen/git/py-webapp/twitter/twitter/home.py", line 20, in toggle_tweet
return self.get_tweets()
^^^^^^^^^^^^^^^^^
TypeError: HomeState.get_tweets() missing 1 required positional argument: 'self'
On the console of browser, we can it cannot find favicon.ico, so it's failed
The chatroom is working well in the following condition
pynecone==0.1.24
bun==5.9
node==12.22.12
If we change to use pynecone==0.1.27, then it cannot work.
The following is the condition.
pynecone==0.1.24
bun==5.9
node==12.22.12
Before, My development environment is running well with pyhteonce 0.1.24
Today I try to upgrade pynecone into 0.1.27 for testing every examples on pynecone-examples.
pynecone==0.1.24
I can run example from this project.
In the next released on the PiPy
repynecone==0.1.27
I use the same node environment to test on my computer.
pynecone==0.1.24 is working but not pynecone==0.1.27
My node version : v16.10.0
My testing way is to use the same nodejs environment to test pc 0.1.24 and pc 0.1.27.
There is the following error on pynecone==0.1.27
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ Installing frontend packages โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
bun install v0.5.5 (242dcea2)
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ App Running โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
$ next dev
/bin/bash: next: command not found
error: script "dev" exited with code 127
python: 3.11.3
bun: 0.5.4
node:12.22.12
OS: Mac OS X 13.3.1 (Intel CPU)
Browser:Chrome
frontend run on localhost:3000
backend run on localhost:8000
nba
from clean python environment$ cd nba
$ rm -rf .web/ && for i in $(find ./ | grep "__pycache__"$ );do rm -rf $i; done
$ pip install pynecone==0.1.14
$ pip install plotly-express plotly pandas
$ curl -fsSL https://bun.sh/install | bash -s -- bun-v0.5.4
$ pc init
$ pc run --loglevel=debug
194 | <VStack><VStack alignItems="left"
195 | sx={{"width": "100%"}}><HStack><Badge>{`Min Age: `}
> 196 | {state.age.at(0)}</Badge>
| ^
197 | <Spacer/>
198 | <Badge>{`Max Age: `}
199 | {state.age.at(1)}</Badge></HStack>
warn - Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/basic-features/fast-refresh#how-it-works
error - pages/index.js (196:11) @ Component
error - TypeError: state.age.at is not a function
at Component (webpack-internal:///./pages/index.js:10398:75)
By the way,
I also test
v0.1.21 with bun 0.5.4
v0.1.24 with bun 0.5.4
v0.1.27 with bun 0.5.9
All of their errors are the same.
My Testing Environment
OS Darwin 22.4.0
Pynecone 0.1.30
Python 3.11.3
Node v16.8.0
Bun 0.5.9
The upload function is not working.
When you click upload, the log is the following.
future: <Task finished name='Task-61' coro=<AsyncServer._handle_event_internal() done, defined at /Users/milochen/anaconda3/envs/pynecone-examples/lib/python3.11/site-packages/socketio/asyncio_server.py:522> exception=ValidationError(model='Event', errors=[{'loc': ('payload',), 'msg': 'value is not a valid dict', 'type': 'type_error.dict'}])>
Traceback (most recent call last):
File "/Users/milochen/anaconda3/envs/pynecone-examples/lib/python3.11/site-packages/socketio/asyncio_server.py", line 524, in _handle_event_internal
r = await server._trigger_event(data[0], namespace, sid, *data[1:])
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "/Users/milochen/anaconda3/envs/pynecone-examples/lib/python3.11/site-packages/socketio/asyncio_server.py", line 569, in _trigger_event
return await self.namespace_handlers[namespace].trigger_event(
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "/Users/milochen/anaconda3/envs/pynecone-examples/lib/python3.11/site-packages/socketio/asyncio_namespace.py", line 37, in trigger_event
ret = await handler(*args)
^^^^^^^^^^^^^^^^^^^^
File "/Users/milochen/anaconda3/envs/pynecone-examples/lib/python3.11/site-packages/pynecone/app.py", line 594, in on_event
event = Event.parse_raw(data)
^^^^^^^^^^^^^^^^^^^^^
File "pydantic/main.py", line 549, in pydantic.main.BaseModel.parse_raw
File "pydantic/main.py", line 526, in pydantic.main.BaseModel.parse_obj
File "pydantic/main.py", line 342, in pydantic.main.BaseModel.__init__
pydantic.error_wrappers.ValidationError: 1 validation error for Event
payload
value is not a valid dict (type=type_error.dict)
class ProductGroup(pc.Model, table=True):
code: str = None
name: str
class Product(pc.Model, table=True):
code: str = None
name: str
price = float
image: str = None
description: str = None
is_active: bool = True
productgroup: ProductGroup
The Product table is related to the ProductGroup table with a foreign key.
The above definition doesn't work!
Hi,
My pynecone-app is taking shape :) However, it is being a bit difficult for me to do things like in other options like Flask are a bit more straightforward.
For example, I would like to have 2 dropdowns or selects. The first one has the values '1' and '2'. The second one gets updated dynamically depending on the selection of the first one. If you select '1' in the first dropdown, the options in the second dropdown get updated to 'A, 'B'. If you select '2' in the first dropdown, the options in the second dropdown get updated to 'C', 'D'.
Can you post here a minimal example of this? I guess we should access the option list in the 2nd dropdown by accessing it referencing its ID but I cannot find an example of this.
Thanks a lot.
Mobile webapp is not testing yet.
We catn start to test mobile web after pc preview
release in new version of pynecone
My environment
python 3.11.3
pc 0.1.28
bun 5.9
Mac 13.3.1 (Intel CPU)
The following step allows the developer to clean and re-init pc project.
so it can simulate the situation of the first time to run the project
rm -rf .web && for i in $(find ./ | grep __pycache__$); do rm -rf $i; done && pc init && pc run
TEST FAILED: When you test it, open localhost:3000 cannot see anything.
But if you change to use the following steps, the init procedure will work well for first time to run nba example.
rm -rf .web && for i in $(find ./ | grep __pycache__$); do rm -rf $i; done && pc init && ~/.bun/bin/bun install --cwd .web/ && pc run
I just add ~/.bun/bin/bun install --cwd .web/
after pc init.
Then nba example can work in the first time.
I got this idea from @r0b2g1t 's contribution on PR
All the requirement.txt files currently reference pynecone-io>=0.1.6
which is an ancient version. We should update them.
Python Version: 3.11
Mac OS
NodeJS Version: 12.22.12
tick is work on pynecone==0.1.20 but not on pynecone==0.1.21 because backend part has some issue.
For the backend part, snakegame and clock example cannot work for pynecone==0.1.21
But if we use pynecone==0.1.21 to build frontend, it can work with the backend with pynecone==0.1.20
future: <Task finished name='Task-35' coro=<AsyncServer._handle_event_internal() done, defined at /Users/milochen/opt/anaconda3/envs/pynecone-311/lib/python3.11/site-packages/socketio/asyncio_server.py:522> exception=AssertionError("Unexpected event type, <class 'method'>.")>
Traceback (most recent call last):
File "/Users/milochen/opt/anaconda3/envs/pynecone-311/lib/python3.11/site-packages/socketio/asyncio_server.py", line 524, in _handle_event_internal
r = await server._trigger_event(data[0], namespace, sid, *data[1:])
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "/Users/milochen/opt/anaconda3/envs/pynecone-311/lib/python3.11/site-packages/socketio/asyncio_server.py", line 569, in _trigger_event
return await self.namespace_handlers[namespace].trigger_event(
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "/Users/milochen/opt/anaconda3/envs/pynecone-311/lib/python3.11/site-packages/socketio/asyncio_namespace.py", line 37, in trigger_event
ret = await handler(*args)
^^^^^^^^^^^^^^^^^^^^
File "/Users/milochen/opt/anaconda3/envs/pynecone-311/lib/python3.11/site-packages/pynecone/app.py", line 582, in on_event
update = await process(self.app, event, sid, headers, client_ip)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "/Users/milochen/opt/anaconda3/envs/pynecone-311/lib/python3.11/site-packages/pynecone/app.py", line 438, in process
update = await state.process(event)
^^^^^^^^^^^^^^^^^^^^^^^^^^
File "/Users/milochen/opt/anaconda3/envs/pynecone-311/lib/python3.11/site-packages/pynecone/state.py", line 579, in process
events = fix_events(events, event.token)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "/Users/milochen/opt/anaconda3/envs/pynecone-311/lib/python3.11/site-packages/pynecone/event.py", line 352, in fix_events
assert isinstance(e, EventSpec), f"Unexpected event type, {type(e)}."
AssertionError: Unexpected event type, <class 'method'>.
The key point is that the following list and follower list are wrong
I use the following one-line to test each example
pip install -r requirements.txt && rm -f pynecone.db && rm -rf .web && for i in $(find ./ | grep __pycache__$); do rm -rf $i; done && echo -e "\033[1;92mMy Testing Environment\033[0m" && echo -e "\t"OS $(uname) $(uname -r) && echo -e "\t"Pynecone $(pc version) && echo -e "\t"$(python --version) && echo -e "\t"Node $(node --version) && echo -e "\t"Bun $(~/.bun/bin/bun --version) && pc init && pc run --loglevel=debug
I you want to understand what the above has done, you can refer to this
simple document to understand why I do that in the testing.
Through the above one-line command, we can get information about my testing environment.
My Testing Environment
OS Darwin 22.4.0
Pynecone 0.1.29
Python 3.11.3
Node v16.6.0
Bun 0.5.9
The following detailed steps show how to reproduce the bug.
Window A: SignUp the new account: Alice
Window B: SignUp the new account: Bob
Window A: Type "Bob" in "Add Friend" input field
Window A: Click '+' button in right of Bob
Window B: Type "Alice" in "Add Friend" input field
Window B: Click '+' button in right of Alice
Widnows A: Refresh the window A by using the browser
Widnows B: Refresh the window B by using the browser
[The following picture is what we can see now]
Window A: Sign out Alice
Window B: Sign out Bob
Window A: Sign in Alice
Window B: Sign in Bob
Window A: click Tweet button
[The following picture is what we can see now]
Window B: click Tweet button
[The following picture is what we can see now]
Window A: Type "I'm Alice" and then click 'Tweet' button
Window B: Type "This is Bob" and then click 'Tweet' button
[The following picture is what we can see now]
Window A: Click 'Tweet' button and click 'X' in the dialog
[The following picture is what we can see now]
The follower list and the following list show incorrect information.
We try to use different ways to refresh the page by the browser by making some actions in the UI.
But the follower list and following list still show incorrect information.
We should have a Chatgpt UI example
After setup Nick in Nick's input and then clicking Message'input,
We have the following error message
Traceback (most recent call last):
File "/Users/milochen/anaconda3/envs/pynecone-examples/lib/python3.11/site-packages/pynecone/state.py", line 693, in _process_event
events = await fn(**payload)
^^^^^^^^^^^^^^^^^^^
File "/Users/milochen/git/py-webapp/chatroom/chatroom/chatroom.py", line 33, in nick_change
await broadcast_nicks()
File "/Users/milochen/git/py-webapp/chatroom/chatroom/chatroom.py", line 117, in broadcast_nicks
await broadcast_event("state.set_nicks", payload=dict(nicks=nicks))
File "/Users/milochen/git/py-webapp/chatroom/chatroom/chatroom.py", line 94, in broadcast_event
update = await state._process(
^^^^^^^^^^^^^^^^^^^^^
TypeError: object async_generator can't be used in 'await' expression
My Testing Environment
OS Darwin 22.4.0
Pynecone 0.1.33
Python 3.11.3
Node v16.8.0
Bun 0.5.9
My Testing Environment
OS Darwin 22.4.0
Pynecone 0.1.32
Python 3.11.3
Node v16.8.0
Bun 0.5.9
This bug may come from old version code. but not only this version
Don't check any box and get the following result after submit.
The output data in the field your answer is false, false, false, false, false.
But the expected data in the field of your answer is false, true, true, true, true.
Upon compiling the /home route in the GPT example, I am getting
error - ./pages/home.js
Error:
x Expected ident
,----
82 | <DataTableGrid columns={state.["Question", "Answer"]}
: ^
`----
Caused by:
0: failed to process input file
1: Syntax Error
Manually removing the state.
prefix to the columns argument seems to yield valid syntax.
I am using Pynecone 0.1.20 with Node.js 18.15.0 on a MacBook Pro M1 Pro.
Hi, thanks for all of these works. I am a big fan of Pynecone framework.
I am using Pynecone for building chart web-app that uses lightweight-charts as a charting framework, which is built by TradingView. I am quite new to react so after following the guide in docs about wrapping react I was not able to launch any chart from the library. It would be really helpful to have any example of using lightweight-charts with datasets.
I have tried this but not working (it says SyntaxError: Cannot use import statement outside a module):
class TradingView(pc.Component):
library = "lightweight-charts"
tag = "ColorType"
Thanks.
Click upload and no file update sometimes.
The content of TextArea shows the file's name in .web/public/files/.
The files are there, and GUI shows correctly.
But just no thing uploads after selecting one file and uploading it.
pc 0.1.31 have the same bug too.
pytz package seems to be missing from the requirements.txt
Hi Team,
I am able to generate the signup page, however when user signs up in gpt page and gets redirected to 'home' page, I am getting following error regarding storage type on Python 3.8:
Seems to be related to this snippet for linking to data table:
pc.data_table(
data=State.questions,
columns=["Question", "Answer"],
pagination=True,
search=True,
sort=True,
width="100%",
),
Trying to figure out how to have a 404 page for routes or pages that don't exist. I see that the pynecone website doesn't have this in place, but you provide a blank page. What would be the process here?
Plotly express works fine but whenever I try to use titles for an axis or the graph itself they do not show. (NBA app specifically)
The dropdowns and sliders on the live app https://nba.pynecone.app/ don't seem to be doing anything.
It gives many errors in Add/Update/Delete errors. When price is float, set cannot input..
import pynecone as pc
import datetime
from typing import List, Optional
from sqlmodel import Field
class Product(pc.Model, table=True):
id: int = Field(primary_key=True)
code: str = None
names: str
price: float
image: str
def __init__(self, id, code, names, price, image):
self.id = id
self.code = code
self.names = names
self.price = price
self.image = image
def __repr__(self) -> str:
return "("+self.code+","+self.names+","+self.price+")"
class State(pc.State):
"""The app state."""
code: str = ""
names: str = ""
price: float= 0
image: str = ""
async def handle_upload(self, file: pc.UploadFile):
#pc.window_alert(f"image has been added.")
upload_data = await file.read()
outfile = f"assets/product/{file.filename}"
# Save the file.
with open(outfile, "wb") as file_object:
file_object.write(upload_data)
# Update the img var.
self.image = file.filename
def add_product_page(self):
return pc.redirect("/product/add")
def add_product(self):
with pc.session() as session:
session.add(
Product(
code=self.code,
names=self.names,
price=self.price,
image=self.image,
)
)
session.commit()
#return pc.window_alert(f"Product {self.names} has been added.")
return pc.redirect("/product/list")
producsList: list[Product] = []
@pc.var
def get_products(self) -> list[Product]:
"""Get all products from the database."""
with pc.session() as session:
self.producsList = session.query(Product).all()
return self.producsList
def update_product_page(self, id: int):
with pc.session() as session:
product = session.query(Product).filter_by(id=id).first()
if product:
self.code = product.code
self.names = product.names
self.price = product.price
self.image = product.image
pc.input(value=self.code)
return pc.redirect("/product/update")
else:
return pc.window_alert("Product not exists!!!")
def update_product(self, id: str):
with pc.session() as session:
product = session.query(Product).filter_by(id=id).first()
if product:
pass
else:
return pc.window_alert("Product not exists!!!")
modal_show: bool = False
def modal_change(self):
self.modal_show = not (self.modal_show)
def delete_product(self, names: str):
with pc.session() as session:
session.query(Product).filter_by(names=names).delete()
session.commit()
self.modal_change()
def index():
"""The main page."""
return pc.center(
pc.vstack(
pc.text("Home"),
pc.link(
"Products",
href="/product/list",
color="rgb(107,99,246)",
)
),
)
def show_products(item: Product):
"""Show a product in a table row."""
return pc.tr(
pc.td(item.code),
pc.td(item.names),
pc.td(item.price),
pc.td(pc.image(src=item.image, height="60px"),),
pc.td(
pc.button("Update", on_click=lambda: State.update_product_page(item.id)),
),
pc.td(
pc.button("Delete", on_click=State.modal_change),
pc.modal(
pc.modal_overlay(
pc.modal_content(
pc.modal_header("Confirm"),
pc.modal_body(
"Do you want to delete product?"
),
pc.modal_footer(
pc.button(
"Delete",
on_click=lambda: State.delete_product(item.names),
bg="red",
color="white",
),
pc.button(
"Close", on_click=State.modal_change
)
),
)
),
is_open=State.modal_show,
),
),
)
def product_list_page():
return pc.center(
pc.vstack(
#navbar(),
pc.vstack(
pc.hstack(
pc.heading("Products"),
pc.button(pc.icon(tag="add"), on_click=State.add_product_page, bg="#F7FAFC", border="1px solid #ddd"),
),
pc.table_container(
pc.table(
pc.thead(
pc.tr(
pc.th("Code"),
pc.th("Name"),
pc.th("Price"),
pc.th("Image"),
)
),
pc.tbody(pc.foreach(State.get_products, show_products)),
variant="striped",
#size="100px",
),
bg="#F7FAFC ",
border="1px solid #ddd",
),
align_items="left",
padding_top="7em",
),
),
padding="1em",
)
def product_add():
return pc.center(
pc.vstack(
#navbar(),
pc.heading("Product Add Page"),
pc.vstack(
pc.hstack(
pc.text("Code:"),
pc.input(placeholder="Code", on_blur=State.set_code),
),
pc.hstack(
pc.text("Name:"),
pc.input(placeholder="Name", on_blur=State.set_names),
),
pc.hstack(
pc.text("Price:"),
pc.input(placeholder="Price", on_blur=State.set_price),
),
pc.hstack(
pc.text("Image:"),
#pc.input(placeholder="Image", on_blur=State.set_image),
pc.image(src=State.image),
pc.upload(
pc.button("Select File"),
pc.text("Drag and drop files here or click to select files"),
border="1px dotted black",
on_mouse_out=lambda: State.handle_upload(pc.upload_files())
#padding="20em",
),
)
),
pc.button("Save", on_click=State.add_product),
#box_shadow="lg",
#bg="#F7FAFC ",
padding="1em",
border="1px solid #ddd",
),
padding_top="3em",
)
def product_update_page():
return pc.center(
pc.vstack(
#navbar(),
pc.heading("Product Update Page"),
pc.vstack(
pc.hstack(
pc.text("Code:"),
pc.input(placeholder="Code", value=State.code, on_blur=State.set_code),
),
pc.hstack(
pc.text("Name:"),
pc.input(placeholder="Name", value=State.names, on_blur=State.set_names),
),
pc.hstack(
pc.text("Price:"),
pc.input(placeholder="Price", value=State.price, on_blur=State.set_price),
),
pc.hstack(
pc.text("Image:"),
#pc.input(placeholder="Image", on_blur=State.set_price),
pc.image(src=State.image),
pc.upload(
pc.button("Select File"),
pc.text("Drag and drop files here or click to select files"),
border="1px dotted black",
on_mouse_out=lambda: State.handle_upload(pc.upload_files())
#padding="20em",
),
)
),
pc.button("Save", on_click=State.add_product),
#box_shadow="lg",
#bg="#F7FAFC ",
padding="1em",
border="1px solid #ddd",
),
padding_top="3em",
)
# Add state and page to the app.
app = pc.App(state=State)
app.add_page(index)
app.add_page(product_list_page, "/product/list")
app.add_page(product_update_page, "/product/update")
app.compile()
The meridiem is calculated in UTC time rather than the timezone. At 6pm pacific:
>>> datetime.datetime.now(tz=datetime.timezone.utc).hour
2
>>> datetime.datetime.now().hour
18
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.