Initial commit
This commit is contained in:
Mike
@@ -0,0 +1,40 @@
|
||||
name: React Extension Build + Publish to Comfy Registry
|
||||
|
||||
on:
|
||||
push:
|
||||
branches: [ "main" ]
|
||||
paths:
|
||||
- 'pyproject.toml'
|
||||
|
||||
jobs:
|
||||
build:
|
||||
runs-on: ubuntu-latest
|
||||
if: ${{ github.repository_owner == 'Comfy-Org' }}
|
||||
|
||||
strategy:
|
||||
matrix:
|
||||
node-version: [18.x]
|
||||
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
|
||||
- name: Use Node.js ${{ matrix.node-version }}
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: ${{ matrix.node-version }}
|
||||
|
||||
- name: Install dependencies
|
||||
run: |
|
||||
cd ui
|
||||
npm install
|
||||
|
||||
- name: Build React extension
|
||||
run: |
|
||||
cd ui
|
||||
npm run build
|
||||
|
||||
- name: Publish Custom Node
|
||||
uses: Comfy-Org/publish-node-action@main
|
||||
with:
|
||||
personal_access_token: ${{ secrets.REGISTRY_ACCESS_TOKEN }}
|
||||
skip_checkout: 'true'
|
||||
+15
@@ -0,0 +1,15 @@
|
||||
node_modules/
|
||||
__pycache__/
|
||||
dist/
|
||||
.DS_Store
|
||||
.env
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
node.zip
|
||||
.vscode/
|
||||
.claude/
|
||||
@@ -0,0 +1,674 @@
|
||||
GNU GENERAL PUBLIC LICENSE
|
||||
Version 3, 29 June 2007
|
||||
|
||||
Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
|
||||
Everyone is permitted to copy and distribute verbatim copies
|
||||
of this license document, but changing it is not allowed.
|
||||
|
||||
Preamble
|
||||
|
||||
The GNU General Public License is a free, copyleft license for
|
||||
software and other kinds of works.
|
||||
|
||||
The licenses for most software and other practical works are designed
|
||||
to take away your freedom to share and change the works. By contrast,
|
||||
the GNU General Public License is intended to guarantee your freedom to
|
||||
share and change all versions of a program--to make sure it remains free
|
||||
software for all its users. We, the Free Software Foundation, use the
|
||||
GNU General Public License for most of our software; it applies also to
|
||||
any other work released this way by its authors. You can apply it to
|
||||
your programs, too.
|
||||
|
||||
When we speak of free software, we are referring to freedom, not
|
||||
price. Our General Public Licenses are designed to make sure that you
|
||||
have the freedom to distribute copies of free software (and charge for
|
||||
them if you wish), that you receive source code or can get it if you
|
||||
want it, that you can change the software or use pieces of it in new
|
||||
free programs, and that you know you can do these things.
|
||||
|
||||
To protect your rights, we need to prevent others from denying you
|
||||
these rights or asking you to surrender the rights. Therefore, you have
|
||||
certain responsibilities if you distribute copies of the software, or if
|
||||
you modify it: responsibilities to respect the freedom of others.
|
||||
|
||||
For example, if you distribute copies of such a program, whether
|
||||
gratis or for a fee, you must pass on to the recipients the same
|
||||
freedoms that you received. You must make sure that they, too, receive
|
||||
or can get the source code. And you must show them these terms so they
|
||||
know their rights.
|
||||
|
||||
Developers that use the GNU GPL protect your rights with two steps:
|
||||
(1) assert copyright on the software, and (2) offer you this License
|
||||
giving you legal permission to copy, distribute and/or modify it.
|
||||
|
||||
For the developers' and authors' protection, the GPL clearly explains
|
||||
that there is no warranty for this free software. For both users' and
|
||||
authors' sake, the GPL requires that modified versions be marked as
|
||||
changed, so that their problems will not be attributed erroneously to
|
||||
authors of previous versions.
|
||||
|
||||
Some devices are designed to deny users access to install or run
|
||||
modified versions of the software inside them, although the manufacturer
|
||||
can do so. This is fundamentally incompatible with the aim of
|
||||
protecting users' freedom to change the software. The systematic
|
||||
pattern of such abuse occurs in the area of products for individuals to
|
||||
use, which is precisely where it is most unacceptable. Therefore, we
|
||||
have designed this version of the GPL to prohibit the practice for those
|
||||
products. If such problems arise substantially in other domains, we
|
||||
stand ready to extend this provision to those domains in future versions
|
||||
of the GPL, as needed to protect the freedom of users.
|
||||
|
||||
Finally, every program is threatened constantly by software patents.
|
||||
States should not allow patents to restrict development and use of
|
||||
software on general-purpose computers, but in those that do, we wish to
|
||||
avoid the special danger that patents applied to a free program could
|
||||
make it effectively proprietary. To prevent this, the GPL assures that
|
||||
patents cannot be used to render the program non-free.
|
||||
|
||||
The precise terms and conditions for copying, distribution and
|
||||
modification follow.
|
||||
|
||||
TERMS AND CONDITIONS
|
||||
|
||||
0. Definitions.
|
||||
|
||||
"This License" refers to version 3 of the GNU General Public License.
|
||||
|
||||
"Copyright" also means copyright-like laws that apply to other kinds of
|
||||
works, such as semiconductor masks.
|
||||
|
||||
"The Program" refers to any copyrightable work licensed under this
|
||||
License. Each licensee is addressed as "you". "Licensees" and
|
||||
"recipients" may be individuals or organizations.
|
||||
|
||||
To "modify" a work means to copy from or adapt all or part of the work
|
||||
in a fashion requiring copyright permission, other than the making of an
|
||||
exact copy. The resulting work is called a "modified version" of the
|
||||
earlier work or a work "based on" the earlier work.
|
||||
|
||||
A "covered work" means either the unmodified Program or a work based
|
||||
on the Program.
|
||||
|
||||
To "propagate" a work means to do anything with it that, without
|
||||
permission, would make you directly or secondarily liable for
|
||||
infringement under applicable copyright law, except executing it on a
|
||||
computer or modifying a private copy. Propagation includes copying,
|
||||
distribution (with or without modification), making available to the
|
||||
public, and in some countries other activities as well.
|
||||
|
||||
To "convey" a work means any kind of propagation that enables other
|
||||
parties to make or receive copies. Mere interaction with a user through
|
||||
a computer network, with no transfer of a copy, is not conveying.
|
||||
|
||||
An interactive user interface displays "Appropriate Legal Notices"
|
||||
to the extent that it includes a convenient and prominently visible
|
||||
feature that (1) displays an appropriate copyright notice, and (2)
|
||||
tells the user that there is no warranty for the work (except to the
|
||||
extent that warranties are provided), that licensees may convey the
|
||||
work under this License, and how to view a copy of this License. If
|
||||
the interface presents a list of user commands or options, such as a
|
||||
menu, a prominent item in the list meets this criterion.
|
||||
|
||||
1. Source Code.
|
||||
|
||||
The "source code" for a work means the preferred form of the work
|
||||
for making modifications to it. "Object code" means any non-source
|
||||
form of a work.
|
||||
|
||||
A "Standard Interface" means an interface that either is an official
|
||||
standard defined by a recognized standards body, or, in the case of
|
||||
interfaces specified for a particular programming language, one that
|
||||
is widely used among developers working in that language.
|
||||
|
||||
The "System Libraries" of an executable work include anything, other
|
||||
than the work as a whole, that (a) is included in the normal form of
|
||||
packaging a Major Component, but which is not part of that Major
|
||||
Component, and (b) serves only to enable use of the work with that
|
||||
Major Component, or to implement a Standard Interface for which an
|
||||
implementation is available to the public in source code form. A
|
||||
"Major Component", in this context, means a major essential component
|
||||
(kernel, window system, and so on) of the specific operating system
|
||||
(if any) on which the executable work runs, or a compiler used to
|
||||
produce the work, or an object code interpreter used to run it.
|
||||
|
||||
The "Corresponding Source" for a work in object code form means all
|
||||
the source code needed to generate, install, and (for an executable
|
||||
work) run the object code and to modify the work, including scripts to
|
||||
control those activities. However, it does not include the work's
|
||||
System Libraries, or general-purpose tools or generally available free
|
||||
programs which are used unmodified in performing those activities but
|
||||
which are not part of the work. For example, Corresponding Source
|
||||
includes interface definition files associated with source files for
|
||||
the work, and the source code for shared libraries and dynamically
|
||||
linked subprograms that the work is specifically designed to require,
|
||||
such as by intimate data communication or control flow between those
|
||||
subprograms and other parts of the work.
|
||||
|
||||
The Corresponding Source need not include anything that users
|
||||
can regenerate automatically from other parts of the Corresponding
|
||||
Source.
|
||||
|
||||
The Corresponding Source for a work in source code form is that
|
||||
same work.
|
||||
|
||||
2. Basic Permissions.
|
||||
|
||||
All rights granted under this License are granted for the term of
|
||||
copyright on the Program, and are irrevocable provided the stated
|
||||
conditions are met. This License explicitly affirms your unlimited
|
||||
permission to run the unmodified Program. The output from running a
|
||||
covered work is covered by this License only if the output, given its
|
||||
content, constitutes a covered work. This License acknowledges your
|
||||
rights of fair use or other equivalent, as provided by copyright law.
|
||||
|
||||
You may make, run and propagate covered works that you do not
|
||||
convey, without conditions so long as your license otherwise remains
|
||||
in force. You may convey covered works to others for the sole purpose
|
||||
of having them make modifications exclusively for you, or provide you
|
||||
with facilities for running those works, provided that you comply with
|
||||
the terms of this License in conveying all material for which you do
|
||||
not control copyright. Those thus making or running the covered works
|
||||
for you must do so exclusively on your behalf, under your direction
|
||||
and control, on terms that prohibit them from making any copies of
|
||||
your copyrighted material outside their relationship with you.
|
||||
|
||||
Conveying under any other circumstances is permitted solely under
|
||||
the conditions stated below. Sublicensing is not allowed; section 10
|
||||
makes it unnecessary.
|
||||
|
||||
3. Protecting Users' Legal Rights From Anti-Circumvention Law.
|
||||
|
||||
No covered work shall be deemed part of an effective technological
|
||||
measure under any applicable law fulfilling obligations under article
|
||||
11 of the WIPO copyright treaty adopted on 20 December 1996, or
|
||||
similar laws prohibiting or restricting circumvention of such
|
||||
measures.
|
||||
|
||||
When you convey a covered work, you waive any legal power to forbid
|
||||
circumvention of technological measures to the extent such circumvention
|
||||
is effected by exercising rights under this License with respect to
|
||||
the covered work, and you disclaim any intention to limit operation or
|
||||
modification of the work as a means of enforcing, against the work's
|
||||
users, your or third parties' legal rights to forbid circumvention of
|
||||
technological measures.
|
||||
|
||||
4. Conveying Verbatim Copies.
|
||||
|
||||
You may convey verbatim copies of the Program's source code as you
|
||||
receive it, in any medium, provided that you conspicuously and
|
||||
appropriately publish on each copy an appropriate copyright notice;
|
||||
keep intact all notices stating that this License and any
|
||||
non-permissive terms added in accord with section 7 apply to the code;
|
||||
keep intact all notices of the absence of any warranty; and give all
|
||||
recipients a copy of this License along with the Program.
|
||||
|
||||
You may charge any price or no price for each copy that you convey,
|
||||
and you may offer support or warranty protection for a fee.
|
||||
|
||||
5. Conveying Modified Source Versions.
|
||||
|
||||
You may convey a work based on the Program, or the modifications to
|
||||
produce it from the Program, in the form of source code under the
|
||||
terms of section 4, provided that you also meet all of these conditions:
|
||||
|
||||
a) The work must carry prominent notices stating that you modified
|
||||
it, and giving a relevant date.
|
||||
|
||||
b) The work must carry prominent notices stating that it is
|
||||
released under this License and any conditions added under section
|
||||
7. This requirement modifies the requirement in section 4 to
|
||||
"keep intact all notices".
|
||||
|
||||
c) You must license the entire work, as a whole, under this
|
||||
License to anyone who comes into possession of a copy. This
|
||||
License will therefore apply, along with any applicable section 7
|
||||
additional terms, to the whole of the work, and all its parts,
|
||||
regardless of how they are packaged. This License gives no
|
||||
permission to license the work in any other way, but it does not
|
||||
invalidate such permission if you have separately received it.
|
||||
|
||||
d) If the work has interactive user interfaces, each must display
|
||||
Appropriate Legal Notices; however, if the Program has interactive
|
||||
interfaces that do not display Appropriate Legal Notices, your
|
||||
work need not make them do so.
|
||||
|
||||
A compilation of a covered work with other separate and independent
|
||||
works, which are not by their nature extensions of the covered work,
|
||||
and which are not combined with it such as to form a larger program,
|
||||
in or on a volume of a storage or distribution medium, is called an
|
||||
"aggregate" if the compilation and its resulting copyright are not
|
||||
used to limit the access or legal rights of the compilation's users
|
||||
beyond what the individual works permit. Inclusion of a covered work
|
||||
in an aggregate does not cause this License to apply to the other
|
||||
parts of the aggregate.
|
||||
|
||||
6. Conveying Non-Source Forms.
|
||||
|
||||
You may convey a covered work in object code form under the terms
|
||||
of sections 4 and 5, provided that you also convey the
|
||||
machine-readable Corresponding Source under the terms of this License,
|
||||
in one of these ways:
|
||||
|
||||
a) Convey the object code in, or embodied in, a physical product
|
||||
(including a physical distribution medium), accompanied by the
|
||||
Corresponding Source fixed on a durable physical medium
|
||||
customarily used for software interchange.
|
||||
|
||||
b) Convey the object code in, or embodied in, a physical product
|
||||
(including a physical distribution medium), accompanied by a
|
||||
written offer, valid for at least three years and valid for as
|
||||
long as you offer spare parts or customer support for that product
|
||||
model, to give anyone who possesses the object code either (1) a
|
||||
copy of the Corresponding Source for all the software in the
|
||||
product that is covered by this License, on a durable physical
|
||||
medium customarily used for software interchange, for a price no
|
||||
more than your reasonable cost of physically performing this
|
||||
conveying of source, or (2) access to copy the
|
||||
Corresponding Source from a network server at no charge.
|
||||
|
||||
c) Convey individual copies of the object code with a copy of the
|
||||
written offer to provide the Corresponding Source. This
|
||||
alternative is allowed only occasionally and noncommercially, and
|
||||
only if you received the object code with such an offer, in accord
|
||||
with subsection 6b.
|
||||
|
||||
d) Convey the object code by offering access from a designated
|
||||
place (gratis or for a charge), and offer equivalent access to the
|
||||
Corresponding Source in the same way through the same place at no
|
||||
further charge. You need not require recipients to copy the
|
||||
Corresponding Source along with the object code. If the place to
|
||||
copy the object code is a network server, the Corresponding Source
|
||||
may be on a different server (operated by you or a third party)
|
||||
that supports equivalent copying facilities, provided you maintain
|
||||
clear directions next to the object code saying where to find the
|
||||
Corresponding Source. Regardless of what server hosts the
|
||||
Corresponding Source, you remain obligated to ensure that it is
|
||||
available for as long as needed to satisfy these requirements.
|
||||
|
||||
e) Convey the object code using peer-to-peer transmission, provided
|
||||
you inform other peers where the object code and Corresponding
|
||||
Source of the work are being offered to the general public at no
|
||||
charge under subsection 6d.
|
||||
|
||||
A separable portion of the object code, whose source code is excluded
|
||||
from the Corresponding Source as a System Library, need not be
|
||||
included in conveying the object code work.
|
||||
|
||||
A "User Product" is either (1) a "consumer product", which means any
|
||||
tangible personal property which is normally used for personal, family,
|
||||
or household purposes, or (2) anything designed or sold for incorporation
|
||||
into a dwelling. In determining whether a product is a consumer product,
|
||||
doubtful cases shall be resolved in favor of coverage. For a particular
|
||||
product received by a particular user, "normally used" refers to a
|
||||
typical or common use of that class of product, regardless of the status
|
||||
of the particular user or of the way in which the particular user
|
||||
actually uses, or expects or is expected to use, the product. A product
|
||||
is a consumer product regardless of whether the product has substantial
|
||||
commercial, industrial or non-consumer uses, unless such uses represent
|
||||
the only significant mode of use of the product.
|
||||
|
||||
"Installation Information" for a User Product means any methods,
|
||||
procedures, authorization keys, or other information required to install
|
||||
and execute modified versions of a covered work in that User Product from
|
||||
a modified version of its Corresponding Source. The information must
|
||||
suffice to ensure that the continued functioning of the modified object
|
||||
code is in no case prevented or interfered with solely because
|
||||
modification has been made.
|
||||
|
||||
If you convey an object code work under this section in, or with, or
|
||||
specifically for use in, a User Product, and the conveying occurs as
|
||||
part of a transaction in which the right of possession and use of the
|
||||
User Product is transferred to the recipient in perpetuity or for a
|
||||
fixed term (regardless of how the transaction is characterized), the
|
||||
Corresponding Source conveyed under this section must be accompanied
|
||||
by the Installation Information. But this requirement does not apply
|
||||
if neither you nor any third party retains the ability to install
|
||||
modified object code on the User Product (for example, the work has
|
||||
been installed in ROM).
|
||||
|
||||
The requirement to provide Installation Information does not include a
|
||||
requirement to continue to provide support service, warranty, or updates
|
||||
for a work that has been modified or installed by the recipient, or for
|
||||
the User Product in which it has been modified or installed. Access to a
|
||||
network may be denied when the modification itself materially and
|
||||
adversely affects the operation of the network or violates the rules and
|
||||
protocols for communication across the network.
|
||||
|
||||
Corresponding Source conveyed, and Installation Information provided,
|
||||
in accord with this section must be in a format that is publicly
|
||||
documented (and with an implementation available to the public in
|
||||
source code form), and must require no special password or key for
|
||||
unpacking, reading or copying.
|
||||
|
||||
7. Additional Terms.
|
||||
|
||||
"Additional permissions" are terms that supplement the terms of this
|
||||
License by making exceptions from one or more of its conditions.
|
||||
Additional permissions that are applicable to the entire Program shall
|
||||
be treated as though they were included in this License, to the extent
|
||||
that they are valid under applicable law. If additional permissions
|
||||
apply only to part of the Program, that part may be used separately
|
||||
under those permissions, but the entire Program remains governed by
|
||||
this License without regard to the additional permissions.
|
||||
|
||||
When you convey a copy of a covered work, you may at your option
|
||||
remove any additional permissions from that copy, or from any part of
|
||||
it. (Additional permissions may be written to require their own
|
||||
removal in certain cases when you modify the work.) You may place
|
||||
additional permissions on material, added by you to a covered work,
|
||||
for which you have or can give appropriate copyright permission.
|
||||
|
||||
Notwithstanding any other provision of this License, for material you
|
||||
add to a covered work, you may (if authorized by the copyright holders of
|
||||
that material) supplement the terms of this License with terms:
|
||||
|
||||
a) Disclaiming warranty or limiting liability differently from the
|
||||
terms of sections 15 and 16 of this License; or
|
||||
|
||||
b) Requiring preservation of specified reasonable legal notices or
|
||||
author attributions in that material or in the Appropriate Legal
|
||||
Notices displayed by works containing it; or
|
||||
|
||||
c) Prohibiting misrepresentation of the origin of that material, or
|
||||
requiring that modified versions of such material be marked in
|
||||
reasonable ways as different from the original version; or
|
||||
|
||||
d) Limiting the use for publicity purposes of names of licensors or
|
||||
authors of the material; or
|
||||
|
||||
e) Declining to grant rights under trademark law for use of some
|
||||
trade names, trademarks, or service marks; or
|
||||
|
||||
f) Requiring indemnification of licensors and authors of that
|
||||
material by anyone who conveys the material (or modified versions of
|
||||
it) with contractual assumptions of liability to the recipient, for
|
||||
any liability that these contractual assumptions directly impose on
|
||||
those licensors and authors.
|
||||
|
||||
All other non-permissive additional terms are considered "further
|
||||
restrictions" within the meaning of section 10. If the Program as you
|
||||
received it, or any part of it, contains a notice stating that it is
|
||||
governed by this License along with a term that is a further
|
||||
restriction, you may remove that term. If a license document contains
|
||||
a further restriction but permits relicensing or conveying under this
|
||||
License, you may add to a covered work material governed by the terms
|
||||
of that license document, provided that the further restriction does
|
||||
not survive such relicensing or conveying.
|
||||
|
||||
If you add terms to a covered work in accord with this section, you
|
||||
must place, in the relevant source files, a statement of the
|
||||
additional terms that apply to those files, or a notice indicating
|
||||
where to find the applicable terms.
|
||||
|
||||
Additional terms, permissive or non-permissive, may be stated in the
|
||||
form of a separately written license, or stated as exceptions;
|
||||
the above requirements apply either way.
|
||||
|
||||
8. Termination.
|
||||
|
||||
You may not propagate or modify a covered work except as expressly
|
||||
provided under this License. Any attempt otherwise to propagate or
|
||||
modify it is void, and will automatically terminate your rights under
|
||||
this License (including any patent licenses granted under the third
|
||||
paragraph of section 11).
|
||||
|
||||
However, if you cease all violation of this License, then your
|
||||
license from a particular copyright holder is reinstated (a)
|
||||
provisionally, unless and until the copyright holder explicitly and
|
||||
finally terminates your license, and (b) permanently, if the copyright
|
||||
holder fails to notify you of the violation by some reasonable means
|
||||
prior to 60 days after the cessation.
|
||||
|
||||
Moreover, your license from a particular copyright holder is
|
||||
reinstated permanently if the copyright holder notifies you of the
|
||||
violation by some reasonable means, this is the first time you have
|
||||
received notice of violation of this License (for any work) from that
|
||||
copyright holder, and you cure the violation prior to 30 days after
|
||||
your receipt of the notice.
|
||||
|
||||
Termination of your rights under this section does not terminate the
|
||||
licenses of parties who have received copies or rights from you under
|
||||
this License. If your rights have been terminated and not permanently
|
||||
reinstated, you do not qualify to receive new licenses for the same
|
||||
material under section 10.
|
||||
|
||||
9. Acceptance Not Required for Having Copies.
|
||||
|
||||
You are not required to accept this License in order to receive or
|
||||
run a copy of the Program. Ancillary propagation of a covered work
|
||||
occurring solely as a consequence of using peer-to-peer transmission
|
||||
to receive a copy likewise does not require acceptance. However,
|
||||
nothing other than this License grants you permission to propagate or
|
||||
modify any covered work. These actions infringe copyright if you do
|
||||
not accept this License. Therefore, by modifying or propagating a
|
||||
covered work, you indicate your acceptance of this License to do so.
|
||||
|
||||
10. Automatic Licensing of Downstream Recipients.
|
||||
|
||||
Each time you convey a covered work, the recipient automatically
|
||||
receives a license from the original licensors, to run, modify and
|
||||
propagate that work, subject to this License. You are not responsible
|
||||
for enforcing compliance by third parties with this License.
|
||||
|
||||
An "entity transaction" is a transaction transferring control of an
|
||||
organization, or substantially all assets of one, or subdividing an
|
||||
organization, or merging organizations. If propagation of a covered
|
||||
work results from an entity transaction, each party to that
|
||||
transaction who receives a copy of the work also receives whatever
|
||||
licenses to the work the party's predecessor in interest had or could
|
||||
give under the previous paragraph, plus a right to possession of the
|
||||
Corresponding Source of the work from the predecessor in interest, if
|
||||
the predecessor has it or can get it with reasonable efforts.
|
||||
|
||||
You may not impose any further restrictions on the exercise of the
|
||||
rights granted or affirmed under this License. For example, you may
|
||||
not impose a license fee, royalty, or other charge for exercise of
|
||||
rights granted under this License, and you may not initiate litigation
|
||||
(including a cross-claim or counterclaim in a lawsuit) alleging that
|
||||
any patent claim is infringed by making, using, selling, offering for
|
||||
sale, or importing the Program or any portion of it.
|
||||
|
||||
11. Patents.
|
||||
|
||||
A "contributor" is a copyright holder who authorizes use under this
|
||||
License of the Program or a work on which the Program is based. The
|
||||
work thus licensed is called the contributor's "contributor version".
|
||||
|
||||
A contributor's "essential patent claims" are all patent claims
|
||||
owned or controlled by the contributor, whether already acquired or
|
||||
hereafter acquired, that would be infringed by some manner, permitted
|
||||
by this License, of making, using, or selling its contributor version,
|
||||
but do not include claims that would be infringed only as a
|
||||
consequence of further modification of the contributor version. For
|
||||
purposes of this definition, "control" includes the right to grant
|
||||
patent sublicenses in a manner consistent with the requirements of
|
||||
this License.
|
||||
|
||||
Each contributor grants you a non-exclusive, worldwide, royalty-free
|
||||
patent license under the contributor's essential patent claims, to
|
||||
make, use, sell, offer for sale, import and otherwise run, modify and
|
||||
propagate the contents of its contributor version.
|
||||
|
||||
In the following three paragraphs, a "patent license" is any express
|
||||
agreement or commitment, however denominated, not to enforce a patent
|
||||
(such as an express permission to practice a patent or covenant not to
|
||||
sue for patent infringement). To "grant" such a patent license to a
|
||||
party means to make such an agreement or commitment not to enforce a
|
||||
patent against the party.
|
||||
|
||||
If you convey a covered work, knowingly relying on a patent license,
|
||||
and the Corresponding Source of the work is not available for anyone
|
||||
to copy, free of charge and under the terms of this License, through a
|
||||
publicly available network server or other readily accessible means,
|
||||
then you must either (1) cause the Corresponding Source to be so
|
||||
available, or (2) arrange to deprive yourself of the benefit of the
|
||||
patent license for this particular work, or (3) arrange, in a manner
|
||||
consistent with the requirements of this License, to extend the patent
|
||||
license to downstream recipients. "Knowingly relying" means you have
|
||||
actual knowledge that, but for the patent license, your conveying the
|
||||
covered work in a country, or your recipient's use of the covered work
|
||||
in a country, would infringe one or more identifiable patents in that
|
||||
country that you have reason to believe are valid.
|
||||
|
||||
If, pursuant to or in connection with a single transaction or
|
||||
arrangement, you convey, or propagate by procuring conveyance of, a
|
||||
covered work, and grant a patent license to some of the parties
|
||||
receiving the covered work authorizing them to use, propagate, modify
|
||||
or convey a specific copy of the covered work, then the patent license
|
||||
you grant is automatically extended to all recipients of the covered
|
||||
work and works based on it.
|
||||
|
||||
A patent license is "discriminatory" if it does not include within
|
||||
the scope of its coverage, prohibits the exercise of, or is
|
||||
conditioned on the non-exercise of one or more of the rights that are
|
||||
specifically granted under this License. You may not convey a covered
|
||||
work if you are a party to an arrangement with a third party that is
|
||||
in the business of distributing software, under which you make payment
|
||||
to the third party based on the extent of your activity of conveying
|
||||
the work, and under which the third party grants, to any of the
|
||||
parties who would receive the covered work from you, a discriminatory
|
||||
patent license (a) in connection with copies of the covered work
|
||||
conveyed by you (or copies made from those copies), or (b) primarily
|
||||
for and in connection with specific products or compilations that
|
||||
contain the covered work, unless you entered into that arrangement,
|
||||
or that patent license was granted, prior to 28 March 2007.
|
||||
|
||||
Nothing in this License shall be construed as excluding or limiting
|
||||
any implied license or other defenses to infringement that may
|
||||
otherwise be available to you under applicable patent law.
|
||||
|
||||
12. No Surrender of Others' Freedom.
|
||||
|
||||
If conditions are imposed on you (whether by court order, agreement or
|
||||
otherwise) that contradict the conditions of this License, they do not
|
||||
excuse you from the conditions of this License. If you cannot convey a
|
||||
covered work so as to satisfy simultaneously your obligations under this
|
||||
License and any other pertinent obligations, then as a consequence you may
|
||||
not convey it at all. For example, if you agree to terms that obligate you
|
||||
to collect a royalty for further conveying from those to whom you convey
|
||||
the Program, the only way you could satisfy both those terms and this
|
||||
License would be to refrain entirely from conveying the Program.
|
||||
|
||||
13. Use with the GNU Affero General Public License.
|
||||
|
||||
Notwithstanding any other provision of this License, you have
|
||||
permission to link or combine any covered work with a work licensed
|
||||
under version 3 of the GNU Affero General Public License into a single
|
||||
combined work, and to convey the resulting work. The terms of this
|
||||
License will continue to apply to the part which is the covered work,
|
||||
but the special requirements of the GNU Affero General Public License,
|
||||
section 13, concerning interaction through a network will apply to the
|
||||
combination as such.
|
||||
|
||||
14. Revised Versions of this License.
|
||||
|
||||
The Free Software Foundation may publish revised and/or new versions of
|
||||
the GNU General Public License from time to time. Such new versions will
|
||||
be similar in spirit to the present version, but may differ in detail to
|
||||
address new problems or concerns.
|
||||
|
||||
Each version is given a distinguishing version number. If the
|
||||
Program specifies that a certain numbered version of the GNU General
|
||||
Public License "or any later version" applies to it, you have the
|
||||
option of following the terms and conditions either of that numbered
|
||||
version or of any later version published by the Free Software
|
||||
Foundation. If the Program does not specify a version number of the
|
||||
GNU General Public License, you may choose any version ever published
|
||||
by the Free Software Foundation.
|
||||
|
||||
If the Program specifies that a proxy can decide which future
|
||||
versions of the GNU General Public License can be used, that proxy's
|
||||
public statement of acceptance of a version permanently authorizes you
|
||||
to choose that version for the Program.
|
||||
|
||||
Later license versions may give you additional or different
|
||||
permissions. However, no additional obligations are imposed on any
|
||||
author or copyright holder as a result of your choosing to follow a
|
||||
later version.
|
||||
|
||||
15. Disclaimer of Warranty.
|
||||
|
||||
THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
|
||||
APPLICABLE LAW. EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
|
||||
HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
|
||||
OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
|
||||
THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
|
||||
PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
|
||||
IS WITH YOU. SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
|
||||
ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
|
||||
|
||||
16. Limitation of Liability.
|
||||
|
||||
IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
|
||||
WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
|
||||
THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
|
||||
GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
|
||||
USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
|
||||
DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
|
||||
PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
|
||||
EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
|
||||
SUCH DAMAGES.
|
||||
|
||||
17. Interpretation of Sections 15 and 16.
|
||||
|
||||
If the disclaimer of warranty and limitation of liability provided
|
||||
above cannot be given local legal effect according to their terms,
|
||||
reviewing courts shall apply local law that most closely approximates
|
||||
an absolute waiver of all civil liability in connection with the
|
||||
Program, unless a warranty or assumption of liability accompanies a
|
||||
copy of the Program in return for a fee.
|
||||
|
||||
END OF TERMS AND CONDITIONS
|
||||
|
||||
How to Apply These Terms to Your New Programs
|
||||
|
||||
If you develop a new program, and you want it to be of the greatest
|
||||
possible use to the public, the best way to achieve this is to make it
|
||||
free software which everyone can redistribute and change under these terms.
|
||||
|
||||
To do so, attach the following notices to the program. It is safest
|
||||
to attach them to the start of each source file to most effectively
|
||||
state the exclusion of warranty; and each file should have at least
|
||||
the "copyright" line and a pointer to where the full notice is found.
|
||||
|
||||
<one line to give the program's name and a brief idea of what it does.>
|
||||
Copyright (C) <year> <name of author>
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU General Public License as published by
|
||||
the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU General Public License
|
||||
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
|
||||
Also add information on how to contact you by electronic and paper mail.
|
||||
|
||||
If the program does terminal interaction, make it output a short
|
||||
notice like this when it starts in an interactive mode:
|
||||
|
||||
<program> Copyright (C) <year> <name of author>
|
||||
This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
|
||||
This is free software, and you are welcome to redistribute it
|
||||
under certain conditions; type `show c' for details.
|
||||
|
||||
The hypothetical commands `show w' and `show c' should show the appropriate
|
||||
parts of the General Public License. Of course, your program's commands
|
||||
might be different; for a GUI interface, you would use an "about box".
|
||||
|
||||
You should also get your employer (if you work as a programmer) or school,
|
||||
if any, to sign a "copyright disclaimer" for the program, if necessary.
|
||||
For more information on this, and how to apply and follow the GNU GPL, see
|
||||
<https://www.gnu.org/licenses/>.
|
||||
|
||||
The GNU General Public License does not permit incorporating your program
|
||||
into proprietary programs. If your program is a subroutine library, you
|
||||
may consider it more useful to permit linking proprietary applications with
|
||||
the library. If this is what you want to do, use the GNU Lesser General
|
||||
Public License instead of this License. But first, please read
|
||||
<https://www.gnu.org/licenses/why-not-lgpl.html>.
|
||||
@@ -0,0 +1,229 @@
|
||||
# ComfyUI React Extension Template
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
A minimal template for creating React/TypeScript frontend extensions for ComfyUI, with complete boilerplate setup.
|
||||
|
||||
📚 **[ComfyUI JavaScript Developer Documentation](https://docs.comfy.org/custom-nodes/js/javascript_overview)** - Learn how to use ComfyUI's powerful extension APIs.
|
||||
|
||||
## Features
|
||||
|
||||
- **React & TypeScript Integration**: Ready-to-use setup for creating modern UI components within ComfyUI
|
||||
- **Internationalization Framework**: Built-in i18n support with English and Chinese examples
|
||||
- **ComfyUI API Integration**: Properly typed access to ComfyUI's internal API
|
||||
- **Full TypeScript Support**: Type-safe code using ComfyUI's official type definitions
|
||||
- **Auto-Reload Development**: Watch mode for seamless development experience
|
||||
|
||||
## Installation
|
||||
|
||||
### From ComfyUI Registry (Recommended)
|
||||
|
||||
The easiest way to install this extension is through the ComfyUI Manager:
|
||||
|
||||
1. Open ComfyUI and go to the Manager
|
||||
2. Search for "React Extension Template"
|
||||
3. Click Install
|
||||
|
||||
### Manual Installation
|
||||
|
||||
If you want to install directly from GitHub for development purposes:
|
||||
|
||||
```bash
|
||||
# Go to your ComfyUI custom_nodes directory
|
||||
cd ComfyUI/custom_nodes
|
||||
|
||||
# Clone the repository
|
||||
git clone https://github.com/Comfy-Org/ComfyUI-React-Extension-Template.git
|
||||
|
||||
# Build the React application
|
||||
cd ComfyUI-React-Extension-Template/ui
|
||||
npm install
|
||||
npm run build
|
||||
|
||||
# Restart ComfyUI
|
||||
```
|
||||
|
||||
⚠️ **Important**: When installing manually from GitHub, you **must** run `npm run build` in the `ui/` directory before the extension will work. The extension requires the compiled React code in the `dist/` folder to function properly in ComfyUI.
|
||||
|
||||
## Usage
|
||||
|
||||
This template includes a simple example extension that displays workflow node statistics. After installation:
|
||||
|
||||
1. Look for the "React Example" tab in the ComfyUI sidebar
|
||||
2. Click to open the example UI
|
||||
|
||||
When developing your own extension, you can:
|
||||
1. Replace the example UI in App.tsx with your own components
|
||||
2. Update the tab title and icon in main.tsx
|
||||
3. Customize the extension's appearance and behavior
|
||||
|
||||
## Development
|
||||
|
||||
### Setup Development Environment
|
||||
|
||||
```bash
|
||||
# Go to the UI directory
|
||||
cd ui
|
||||
|
||||
# Install dependencies
|
||||
npm install
|
||||
|
||||
# Start development mode (watches for changes)
|
||||
npm run watch
|
||||
```
|
||||
|
||||
### Available ComfyUI Extension APIs
|
||||
|
||||
This template provides access to ComfyUI's powerful JavaScript APIs through the official type definitions. You can use these APIs to build rich extensions:
|
||||
|
||||
- **Sidebar Tabs**: Create custom sidebar panels like this template demonstrates
|
||||
- **Bottom Bar Panels**: Add panels to the bottom of the UI
|
||||
- **Top Menu Items**: Add custom entries to the top menu
|
||||
- **Context Menus**: Create custom context menus for the graph
|
||||
- **Settings**: Add settings to the ComfyUI settings panel
|
||||
- **Toasts**: Display notification messages
|
||||
- **Commands**: Create and register custom commands
|
||||
- **Hotkeys/Keybindings**: Register custom keyboard shortcuts
|
||||
- **About Panel Badges**: Add badges to the about panel
|
||||
- **App Events**: Listen to and respond to app events
|
||||
- **Graph Manipulation**: Programmatically manipulate the workflow graph
|
||||
|
||||
For comprehensive documentation on all available APIs, see the [ComfyUI JavaScript Developer Documentation](https://docs.comfy.org/custom-nodes/js/javascript_overview).
|
||||
|
||||
### File Structure
|
||||
|
||||
```
|
||||
ComfyUI-React-Extension-Template/
|
||||
├── .github/ # GitHub configurations
|
||||
│ └── workflows/
|
||||
│ └── react-build.yml # Automatic build and publishing workflow
|
||||
├── __init__.py # Python entry point for ComfyUI integration
|
||||
├── pyproject.toml # Project metadata for ComfyUI Registry
|
||||
├── dist/ # Built extension files (generated)
|
||||
└── ui/ # React application
|
||||
├── public/
|
||||
│ └── locales/ # Internationalization files
|
||||
│ ├── en/
|
||||
│ │ └── main.json # English translations
|
||||
│ └── zh/
|
||||
│ └── main.json # Chinese translations
|
||||
├── src/
|
||||
│ ├── App.tsx # Main React component with example UI
|
||||
│ ├── App.css # Styles for the example UI
|
||||
│ ├── index.css # Global styles and theme variables
|
||||
│ ├── main.tsx # Entry point for React app
|
||||
│ ├── vite-env.d.ts # Vite environment types
|
||||
│ ├── setupTests.ts # Testing environment setup
|
||||
│ ├── __tests__/ # Unit tests for components
|
||||
│ │ └── dummy.test.tsx # Example test
|
||||
│ └── utils/
|
||||
│ └── i18n.ts # Internationalization setup
|
||||
├── eslint.config.js # ESLint configuration
|
||||
├── jest.config.js # Jest testing configuration
|
||||
├── jest.setup.js # Jest setup file
|
||||
├── package.json # npm dependencies
|
||||
├── tsconfig.json # TypeScript configuration
|
||||
├── tsconfig.node.json # TypeScript configuration for Node
|
||||
└── vite.config.ts # Build configuration
|
||||
```
|
||||
|
||||
### TypeScript Support
|
||||
|
||||
This extension uses the official `@comfyorg/comfyui-frontend-types` package for type-safe interaction with ComfyUI APIs. To install it:
|
||||
|
||||
```bash
|
||||
cd ui
|
||||
npm install -D @comfyorg/comfyui-frontend-types
|
||||
```
|
||||
|
||||
## Publishing to ComfyUI Registry
|
||||
|
||||
### Prerequisites
|
||||
|
||||
1. Set up a [Registry](https://registry.comfy.org) account
|
||||
2. Create an API key at https://registry.comfy.org/nodes
|
||||
|
||||
### Steps to Publish
|
||||
|
||||
1. Install the comfy-cli tool:
|
||||
```bash
|
||||
pip install comfy-cli
|
||||
```
|
||||
|
||||
2. Verify your pyproject.toml has the correct metadata:
|
||||
```toml
|
||||
[project]
|
||||
name = "your_extension_name" # Use a unique name for your extension
|
||||
description = "Your extension description here."
|
||||
version = "0.1.0" # Increment this with each update
|
||||
|
||||
[tool.comfy]
|
||||
PublisherId = "your_publisher_id" # Your Registry publisher ID
|
||||
DisplayName = "Your Extension Display Name"
|
||||
includes = ["dist/"] # Include built React code (normally ignored by .gitignore)
|
||||
```
|
||||
|
||||
3. Publish your extension:
|
||||
```bash
|
||||
comfy-cli publish
|
||||
```
|
||||
|
||||
4. When prompted, enter your API key
|
||||
|
||||
### Automatic Publishing with GitHub Actions
|
||||
|
||||
This template includes a GitHub Actions workflow that automatically publishes to the ComfyUI Registry whenever you update the version in pyproject.toml:
|
||||
|
||||
1. Go to your repository's Settings > Secrets and variables > Actions
|
||||
2. Create a new repository secret called `REGISTRY_ACCESS_TOKEN` with your API key
|
||||
3. Commit and push an update to pyproject.toml (e.g., increment the version number)
|
||||
4. The GitHub Action will automatically run and publish your extension
|
||||
|
||||
The workflow configuration is set up in `.github/workflows/react-build.yml` and will trigger when:
|
||||
- The `pyproject.toml` file is modified and pushed to the `main` branch
|
||||
|
||||
The workflow automatically:
|
||||
1. Sets up Node.js environment
|
||||
2. Installs dependencies (`npm install`)
|
||||
3. Builds the React extension (`npm run build`)
|
||||
4. Publishes the extension to the ComfyUI Registry
|
||||
|
||||
## Unit Testing
|
||||
|
||||
This template includes a basic setup for unit testing with Jest and React Testing Library:
|
||||
|
||||
```bash
|
||||
# Run tests
|
||||
npm test
|
||||
|
||||
# Run tests in watch mode during development
|
||||
npm run test:watch
|
||||
```
|
||||
|
||||
Example tests can be found in the `src/__tests__` directory. The setup includes:
|
||||
|
||||
- Jest for running tests
|
||||
- React Testing Library for testing components
|
||||
- Mock implementation of the ComfyUI window.app object
|
||||
|
||||
## Resources
|
||||
|
||||
- [ComfyUI JS Extension Documentation](https://docs.comfy.org/custom-nodes/js/javascript_overview) - Official documentation for ComfyUI JavaScript Extensions
|
||||
- [ComfyUI Registry Documentation](https://docs.comfy.org/registry/publishing) - Learn how to publish your extension
|
||||
- [ComfyUI Frontend Repository](https://github.com/Comfy-Org/ComfyUI-Frontend) - The main ComfyUI frontend codebase
|
||||
- [Official ComfyUI Frontend Types](https://www.npmjs.com/package/@comfyorg/comfyui-frontend-types) - TypeScript definitions for ComfyUI
|
||||
- [React Extension Guide](REACT_EXTENSION_GUIDE.md) - Detailed guide for creating React extensions
|
||||
- [TypeScript Documentation](https://www.typescriptlang.org/docs/)
|
||||
- [React Documentation](https://react.dev/reference/react)
|
||||
- [Jest Documentation](https://jestjs.io/docs/getting-started)
|
||||
- [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/)
|
||||
|
||||
## Contributing
|
||||
|
||||
Contributions are welcome! Feel free to open issues or submit pull requests to improve this template.
|
||||
|
||||
## License
|
||||
|
||||
MIT
|
||||
+53
@@ -0,0 +1,53 @@
|
||||
import os
|
||||
import server
|
||||
from aiohttp import web
|
||||
import folder_paths
|
||||
import nodes
|
||||
|
||||
NODE_CLASS_MAPPINGS = {}
|
||||
__all__ = ["NODE_CLASS_MAPPINGS"]
|
||||
|
||||
# Define the path to our extension
|
||||
workspace_path = os.path.dirname(__file__)
|
||||
dist_path = os.path.join(workspace_path, "dist/example_ext")
|
||||
dist_locales_path = os.path.join(workspace_path, "dist/locales")
|
||||
|
||||
# Print the current paths for debugging
|
||||
print(f"ComfyUI_example_frontend_extension workspace path: {workspace_path}")
|
||||
print(f"Dist path: {dist_path}")
|
||||
print(f"Dist locales path: {dist_locales_path}")
|
||||
print(f"Locales exist: {os.path.exists(dist_locales_path)}")
|
||||
|
||||
# Register the static route for serving our React app assets
|
||||
if os.path.exists(dist_path):
|
||||
# Add the routes for the extension
|
||||
server.PromptServer.instance.app.add_routes([
|
||||
web.static("/example_ext/", dist_path),
|
||||
])
|
||||
|
||||
# Register the locale files route
|
||||
if os.path.exists(dist_locales_path):
|
||||
server.PromptServer.instance.app.add_routes([
|
||||
web.static("/locales/", dist_locales_path),
|
||||
])
|
||||
print(f"Registered locale files route at /locales/")
|
||||
else:
|
||||
print("WARNING: Locale directory not found!")
|
||||
|
||||
# Also register the standard ComfyUI extension web directory
|
||||
|
||||
project_name = os.path.basename(workspace_path)
|
||||
|
||||
try:
|
||||
# Method added in https://github.com/comfyanonymous/ComfyUI/pull/8357
|
||||
from comfy_config import config_parser
|
||||
|
||||
project_config = config_parser.extract_node_configuration(workspace_path)
|
||||
project_name = project_config.project.name
|
||||
print(f"project name read from pyproject.toml: {project_name}")
|
||||
except Exception as e:
|
||||
print(f"Could not load project config, using default name '{project_name}': {e}")
|
||||
|
||||
nodes.EXTENSION_WEB_DIRS[project_name] = os.path.join(workspace_path, "dist")
|
||||
else:
|
||||
print("ComfyUI Example React Extension: Web directory not found")
|
||||
@@ -0,0 +1,16 @@
|
||||
[project]
|
||||
name = "comfyui_react_extension_template"
|
||||
description = "A minimal template for creating React/TypeScript frontend extensions for ComfyUI, with complete boilerplate setup including internationalization and unit testing."
|
||||
version = "0.1.0"
|
||||
license = {file = "LICENSE"}
|
||||
dependencies = []
|
||||
|
||||
[project.urls]
|
||||
Repository = "https://github.com/Comfy-Org/ComfyUI-React-Extension-Template"
|
||||
|
||||
# Used by Comfy Registry https://comfyregistry.org
|
||||
[tool.comfy]
|
||||
PublisherId = "your_publisher_id" # Change this to your actual publisher ID
|
||||
DisplayName = "ComfyUI React Extension Template"
|
||||
Icon = ""
|
||||
includes = ["dist/"]
|
||||
@@ -0,0 +1,35 @@
|
||||
{
|
||||
"root": true,
|
||||
"env": {
|
||||
"browser": true,
|
||||
"es2020": true
|
||||
},
|
||||
"extends": [
|
||||
"eslint:recommended",
|
||||
"plugin:@typescript-eslint/recommended",
|
||||
"plugin:react/recommended",
|
||||
"plugin:react-hooks/recommended",
|
||||
"plugin:react/jsx-runtime",
|
||||
"plugin:prettier/recommended"
|
||||
],
|
||||
"ignorePatterns": ["dist", ".eslintrc.json"],
|
||||
"parser": "@typescript-eslint/parser",
|
||||
"parserOptions": {
|
||||
"ecmaVersion": "latest",
|
||||
"sourceType": "module"
|
||||
},
|
||||
"plugins": ["react-refresh", "unused-imports"],
|
||||
"rules": {
|
||||
"react-refresh/only-export-components": [
|
||||
"warn",
|
||||
{ "allowConstantExport": true }
|
||||
],
|
||||
"unused-imports/no-unused-imports": "error",
|
||||
"@typescript-eslint/no-explicit-any": "off"
|
||||
},
|
||||
"settings": {
|
||||
"react": {
|
||||
"version": "detect"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
{
|
||||
"singleQuote": true,
|
||||
"tabWidth": 2,
|
||||
"semi": false,
|
||||
"trailingComma": "none",
|
||||
"printWidth": 80,
|
||||
"importOrder": ["^@core/(.*)$", "<THIRD_PARTY_MODULES>", "^@/(.*)$", "^[./]"],
|
||||
"importOrderSeparation": true,
|
||||
"importOrderSortSpecifiers": true,
|
||||
"overrides": [
|
||||
{
|
||||
"files": "*.{js,cjs,mjs,ts,cts,mts,tsx,vue}",
|
||||
"options": {
|
||||
"plugins": ["@trivago/prettier-plugin-sort-imports"]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
import pluginJs from '@eslint/js'
|
||||
import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
|
||||
import unusedImports from 'eslint-plugin-unused-imports'
|
||||
import globals from 'globals'
|
||||
import tseslint from 'typescript-eslint'
|
||||
|
||||
export default [
|
||||
{
|
||||
files: ['src/**/*.{js,mjs,cjs,ts,tsx}']
|
||||
},
|
||||
{
|
||||
languageOptions: {
|
||||
globals: {
|
||||
...globals.browser
|
||||
},
|
||||
parser: tseslint.parser,
|
||||
parserOptions: {
|
||||
project: './tsconfig.json',
|
||||
ecmaVersion: 2020,
|
||||
sourceType: 'module'
|
||||
}
|
||||
}
|
||||
},
|
||||
pluginJs.configs.recommended,
|
||||
...tseslint.configs.recommended,
|
||||
eslintPluginPrettierRecommended,
|
||||
{
|
||||
plugins: {
|
||||
'unused-imports': unusedImports
|
||||
},
|
||||
rules: {
|
||||
'@typescript-eslint/no-floating-promises': 'error',
|
||||
'@typescript-eslint/no-explicit-any': 'off',
|
||||
'@typescript-eslint/no-unused-vars': 'off',
|
||||
'@typescript-eslint/prefer-as-const': 'off',
|
||||
'unused-imports/no-unused-imports': 'error'
|
||||
}
|
||||
}
|
||||
]
|
||||
@@ -0,0 +1,16 @@
|
||||
export default {
|
||||
testEnvironment: 'jsdom',
|
||||
transform: {
|
||||
'^.+\\.(ts|tsx)$': ['ts-jest', {
|
||||
useESM: true,
|
||||
}],
|
||||
},
|
||||
moduleNameMapper: {
|
||||
// Handle CSS imports (with CSS modules)
|
||||
'\\.css$': 'identity-obj-proxy',
|
||||
},
|
||||
extensionsToTreatAsEsm: ['.ts', '.tsx'],
|
||||
setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
|
||||
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
|
||||
testMatch: ['**/__tests__/**/*.ts?(x)', '**/?(*.)+(spec|test).ts?(x)']
|
||||
};
|
||||
@@ -0,0 +1,16 @@
|
||||
// Import jest-dom additions
|
||||
import '@testing-library/jest-dom';
|
||||
|
||||
// Mock window.app for ComfyUI integration testing
|
||||
global.window.app = {
|
||||
graph: {
|
||||
_nodes: []
|
||||
},
|
||||
api: {
|
||||
addEventListener: jest.fn(),
|
||||
removeEventListener: jest.fn()
|
||||
},
|
||||
canvas: {
|
||||
centerOnNode: jest.fn()
|
||||
}
|
||||
};
|
||||
Generated
+10003
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,55 @@
|
||||
{
|
||||
"name": "comfyui-example-react-extension",
|
||||
"private": true,
|
||||
"version": "0.1.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc && vite build",
|
||||
"watch": "tsc && vite build --watch",
|
||||
"lint": "eslint . --ext ts,tsx,js,jsx --report-unused-disable-directives --max-warnings 0",
|
||||
"lint:fix": "eslint . --ext ts,tsx,js,jsx --fix",
|
||||
"format": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,css}\"",
|
||||
"typecheck": "tsc --noEmit",
|
||||
"preview": "vite preview",
|
||||
"test": "jest",
|
||||
"test:watch": "jest --watch"
|
||||
},
|
||||
"dependencies": {
|
||||
"i18next": "^23.10.2",
|
||||
"i18next-browser-languagedetector": "^7.2.2",
|
||||
"i18next-http-backend": "^2.5.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-i18next": "^14.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@comfyorg/comfyui-frontend-types": "^1.20.2",
|
||||
"@eslint/eslintrc": "^3.0.2",
|
||||
"@eslint/js": "^9.27.0",
|
||||
"@testing-library/jest-dom": "^6.6.3",
|
||||
"@testing-library/react": "^16.3.0",
|
||||
"@trivago/prettier-plugin-sort-imports": "^5.2.2",
|
||||
"@types/jest": "^30.0.0",
|
||||
"@types/react": "^18.2.66",
|
||||
"@types/react-dom": "^18.2.22",
|
||||
"@typescript-eslint/parser": "^8.32.1",
|
||||
"@vitejs/plugin-react": "^5.1.2",
|
||||
"eslint": "^9.27.0",
|
||||
"eslint-config-prettier": "^10.1.5",
|
||||
"eslint-plugin-prettier": "^5.4.0",
|
||||
"eslint-plugin-react": "^7.37.5",
|
||||
"eslint-plugin-react-hooks": "^5.0.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.20",
|
||||
"eslint-plugin-unused-imports": "^4.1.4",
|
||||
"globals": "^16.1.0",
|
||||
"identity-obj-proxy": "^3.0.0",
|
||||
"jest": "^30.2.0",
|
||||
"jest-environment-jsdom": "^30.2.0",
|
||||
"prettier": "^3.5.3",
|
||||
"ts-jest": "^29.4.6",
|
||||
"typescript": "^5.4.2",
|
||||
"typescript-eslint": "^8.32.1",
|
||||
"vite": "^7.3.0"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
{
|
||||
"app": {
|
||||
"title": "React Example Extension",
|
||||
"description": "Shows statistics about nodes in the current workflow",
|
||||
"noNodes": "No nodes in the workflow",
|
||||
"nodeList": {
|
||||
"title": "Node List",
|
||||
"id": "ID",
|
||||
"type": "Type",
|
||||
"category": "Category",
|
||||
"inputs": "Inputs",
|
||||
"outputs": "Outputs"
|
||||
},
|
||||
"nodeStats": {
|
||||
"title": "Node Statistics",
|
||||
"totalNodes": "Total nodes",
|
||||
"uniqueNodeTypes": "Unique node types"
|
||||
},
|
||||
"footer": {
|
||||
"clickToHighlight": "Click on any node in the list to highlight it in the workflow"
|
||||
}
|
||||
},
|
||||
"Click on any node in the list to highlight it in the workflow": "Click on any node in the list to highlight it in the workflow"
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
{
|
||||
"app": {
|
||||
"title": "React 示例扩展",
|
||||
"description": "显示当前工作流中节点的统计信息",
|
||||
"noNodes": "工作流中没有节点",
|
||||
"nodeList": {
|
||||
"title": "节点列表",
|
||||
"id": "ID",
|
||||
"type": "类型",
|
||||
"category": "类别",
|
||||
"inputs": "输入",
|
||||
"outputs": "输出"
|
||||
},
|
||||
"nodeStats": {
|
||||
"title": "节点统计",
|
||||
"totalNodes": "节点总数",
|
||||
"uniqueNodeTypes": "唯一节点类型"
|
||||
},
|
||||
"footer": {
|
||||
"clickToHighlight": "单击列表中的任何节点以在工作流中突出显示它"
|
||||
}
|
||||
},
|
||||
"Click on any node in the list to highlight it in the workflow": "单击列表中的任何节点以在工作流中突出显示它"
|
||||
}
|
||||
+234
@@ -0,0 +1,234 @@
|
||||
.react-example-container {
|
||||
padding: 16px;
|
||||
height: 100%;
|
||||
max-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: var(--example-bg-color);
|
||||
color: var(--example-text-color);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.react-example-container h2 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 16px;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px solid var(--example-border-color);
|
||||
color: var(--example-primary-color);
|
||||
}
|
||||
|
||||
.react-example-container h3 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 12px;
|
||||
color: var(--example-text-color);
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
/* Stats Overview */
|
||||
.stats-overview {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
flex: 1;
|
||||
padding: 12px;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: var(--example-primary-color);
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 12px;
|
||||
color: var(--example-muted-text-color);
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* Dashboard Sections */
|
||||
.dashboard-section {
|
||||
margin-bottom: 20px;
|
||||
padding: 16px;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* Node Chart */
|
||||
.node-stats-chart {
|
||||
display: flex;
|
||||
height: 120px;
|
||||
align-items: flex-end;
|
||||
gap: 12px;
|
||||
margin-top: 16px;
|
||||
padding-bottom: 24px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.chart-bar-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.chart-bar {
|
||||
width: 24px;
|
||||
min-height: 4px;
|
||||
border-radius: 4px 4px 0 0;
|
||||
transition: height 0.3s ease;
|
||||
}
|
||||
|
||||
.chart-label {
|
||||
position: absolute;
|
||||
bottom: -24px;
|
||||
font-size: 10px;
|
||||
color: var(--example-muted-text-color);
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 100%;
|
||||
transform: rotate(-45deg);
|
||||
transform-origin: top left;
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
/* Category Filter */
|
||||
.category-filter {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.filter-button {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
color: var(--example-text-color);
|
||||
padding: 4px 8px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
transition: background-color 0.2s;
|
||||
border-bottom: 3px solid transparent;
|
||||
}
|
||||
|
||||
.filter-button:hover {
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.filter-button.active {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Node List */
|
||||
.node-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
max-height: 150px;
|
||||
overflow-y: auto;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
.node-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px 12px;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
transform 0.2s,
|
||||
background-color 0.2s;
|
||||
}
|
||||
|
||||
.node-item:hover {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
transform: translateX(2px);
|
||||
}
|
||||
|
||||
.node-badge {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.node-title {
|
||||
flex: 1;
|
||||
font-size: 13px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.node-meta {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
font-size: 11px;
|
||||
color: var(--example-muted-text-color);
|
||||
}
|
||||
|
||||
/* Empty State */
|
||||
.empty-state {
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
color: var(--example-muted-text-color);
|
||||
font-style: italic;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.footer {
|
||||
margin-top: auto;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid var(--example-border-color);
|
||||
font-size: 0.8em;
|
||||
text-align: center;
|
||||
color: var(--example-muted-text-color);
|
||||
}
|
||||
|
||||
/* API Examples Section */
|
||||
.api-examples {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.api-examples h4 {
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 5px;
|
||||
color: var(--example-text-color);
|
||||
}
|
||||
|
||||
/* Scrollbar styling */
|
||||
.node-list::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.node-list::-webkit-scrollbar-track {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.node-list::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.node-list::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
+543
@@ -0,0 +1,543 @@
|
||||
import { ComfyApp } from '@comfyorg/comfyui-frontend-types'
|
||||
import { useEffect, useMemo, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
import './App.css'
|
||||
|
||||
// Type definitions for the global ComfyUI objects
|
||||
declare global {
|
||||
interface Window {
|
||||
app?: ComfyApp
|
||||
}
|
||||
}
|
||||
|
||||
// Interface for our processed node data
|
||||
interface ProcessedNode {
|
||||
id: string | number
|
||||
title: string
|
||||
type: string
|
||||
category: string
|
||||
inputs: number
|
||||
outputs: number
|
||||
pos: [number, number]
|
||||
}
|
||||
|
||||
// Type for category colors
|
||||
type CategoryColors = Record<string, string>
|
||||
|
||||
const CATEGORY_COLORS: CategoryColors = {
|
||||
loaders: '#7e57c2',
|
||||
conditioning: '#26a69a',
|
||||
sampling: '#ef5350',
|
||||
latent: '#66bb6a',
|
||||
image: '#42a5f5',
|
||||
mask: '#ff9800',
|
||||
'conditioning/clip': '#26a69a',
|
||||
'image/postprocessing': '#ec407a',
|
||||
advanced: '#5c6bc0',
|
||||
_default: '#78909c'
|
||||
}
|
||||
|
||||
interface NodeStatsChartProps {
|
||||
nodeCounts: Record<string, number>
|
||||
totalNodes: number
|
||||
}
|
||||
|
||||
function NodeStatsChart({ nodeCounts, totalNodes }: NodeStatsChartProps) {
|
||||
// Only show the top 8 categories for the chart
|
||||
const topCategories = Object.entries(nodeCounts)
|
||||
.sort((a, b) => b[1] - a[1])
|
||||
.slice(0, 8)
|
||||
|
||||
const chartData = topCategories.map(([category, count]) => {
|
||||
return {
|
||||
category,
|
||||
count,
|
||||
percentage: Math.round((count / totalNodes) * 100)
|
||||
}
|
||||
})
|
||||
|
||||
return (
|
||||
<div className="node-stats-chart">
|
||||
{chartData.map((item) => (
|
||||
<div key={item.category} className="chart-bar-container">
|
||||
<div
|
||||
className="chart-bar"
|
||||
style={{
|
||||
height: `${item.percentage * 2}px`,
|
||||
backgroundColor:
|
||||
CATEGORY_COLORS[item.category] || CATEGORY_COLORS._default
|
||||
}}
|
||||
/>
|
||||
<div className="chart-label">{item.category}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
interface CategoryFilterProps {
|
||||
categories: string[]
|
||||
selectedCategory: string
|
||||
onSelectCategory: (category: string) => void
|
||||
}
|
||||
|
||||
function CategoryFilter({
|
||||
categories,
|
||||
selectedCategory,
|
||||
onSelectCategory
|
||||
}: CategoryFilterProps) {
|
||||
// Using useTranslation hook to initialize i18n context
|
||||
useTranslation()
|
||||
|
||||
return (
|
||||
<div className="category-filter">
|
||||
<button
|
||||
className={
|
||||
selectedCategory === 'all' ? 'filter-button active' : 'filter-button'
|
||||
}
|
||||
onClick={() => onSelectCategory('all')}
|
||||
>
|
||||
All
|
||||
</button>
|
||||
{categories.map((category) => (
|
||||
<button
|
||||
key={category}
|
||||
className={
|
||||
selectedCategory === category
|
||||
? 'filter-button active'
|
||||
: 'filter-button'
|
||||
}
|
||||
onClick={() => onSelectCategory(category)}
|
||||
style={{
|
||||
borderBottom: `3px solid ${
|
||||
CATEGORY_COLORS[category] || CATEGORY_COLORS._default
|
||||
}`
|
||||
}}
|
||||
>
|
||||
{category}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function App() {
|
||||
const { t } = useTranslation()
|
||||
const [nodes, setNodes] = useState<ProcessedNode[]>([])
|
||||
const [selectedCategory, setSelectedCategory] = useState<string>('all')
|
||||
const [isQueueRunning, setIsQueueRunning] = useState<boolean>(false)
|
||||
const [highlightedNode, setHighlightedNode] = useState<
|
||||
string | number | null
|
||||
>(null)
|
||||
|
||||
// Get nodes from ComfyUI graph and organize them
|
||||
useEffect(() => {
|
||||
if (!window.app?.graph) return
|
||||
|
||||
// Initial node collection
|
||||
collectNodes()
|
||||
|
||||
// Function to collect nodes from the graph
|
||||
function collectNodes() {
|
||||
const graphNodes = window.app?.graph._nodes
|
||||
if (!graphNodes) return
|
||||
|
||||
const currentNodes: ProcessedNode[] = []
|
||||
|
||||
for (const node of graphNodes) {
|
||||
// Extract category from constructorData if available
|
||||
let category = ''
|
||||
if (node.constructor && 'nodeData' in node.constructor) {
|
||||
const nodeData = node.constructor.nodeData
|
||||
if (
|
||||
nodeData &&
|
||||
typeof nodeData === 'object' &&
|
||||
'category' in nodeData
|
||||
) {
|
||||
category = nodeData.category as string
|
||||
}
|
||||
}
|
||||
|
||||
currentNodes.push({
|
||||
id: node.id,
|
||||
title: node.title,
|
||||
type: node.type,
|
||||
category: category,
|
||||
inputs: node.inputs?.length || 0,
|
||||
outputs: node.outputs?.length || 0,
|
||||
pos: [...node.pos] as [number, number] // Clone position array
|
||||
})
|
||||
}
|
||||
|
||||
setNodes(currentNodes)
|
||||
}
|
||||
|
||||
// Listen for graph changes using the API (not graph directly)
|
||||
const handleGraphChanged = () => {
|
||||
collectNodes()
|
||||
}
|
||||
|
||||
window.app?.api.addEventListener('graphChanged', handleGraphChanged)
|
||||
|
||||
return () => {
|
||||
window.app?.api.removeEventListener('graphChanged', handleGraphChanged)
|
||||
}
|
||||
}, [])
|
||||
|
||||
// Monitor queue status
|
||||
useEffect(() => {
|
||||
if (!window.app?.api) return
|
||||
|
||||
const handleQueueStart = () => setIsQueueRunning(true)
|
||||
const handleQueueComplete = () => setIsQueueRunning(false)
|
||||
|
||||
// Using the Event API with properly typed events
|
||||
window.app.api.addEventListener('execution_start', handleQueueStart)
|
||||
|
||||
// Since 'execution_complete' is not directly in the types, we add a compatibility approach
|
||||
type ApiEventName = Parameters<typeof window.app.api.addEventListener>[0]
|
||||
window.app.api.addEventListener(
|
||||
'execution_complete' as ApiEventName,
|
||||
handleQueueComplete
|
||||
)
|
||||
|
||||
return () => {
|
||||
window.app?.api.removeEventListener('execution_start', handleQueueStart)
|
||||
window.app?.api.removeEventListener(
|
||||
'execution_complete' as ApiEventName,
|
||||
handleQueueComplete
|
||||
)
|
||||
}
|
||||
}, [])
|
||||
|
||||
// Handle node highlighting
|
||||
useEffect(() => {
|
||||
if (!highlightedNode || !window.app?.graph) return
|
||||
|
||||
// Find the node in the graph
|
||||
const graphNodes = window.app.graph._nodes
|
||||
const node = graphNodes.find((n) => n.id === highlightedNode)
|
||||
if (!node) return
|
||||
|
||||
// Center camera on node with smooth animation
|
||||
window.app.canvas.centerOnNode(node)
|
||||
|
||||
// Highlight the node
|
||||
const originalColor = node.color
|
||||
node.color = '#ff5722'
|
||||
window.app.graph.setDirtyCanvas(true, false)
|
||||
|
||||
// Reset highlight after a delay
|
||||
const timeout = setTimeout(() => {
|
||||
if (window.app?.graph._nodes.includes(node)) {
|
||||
node.color = originalColor
|
||||
window.app.graph.setDirtyCanvas(true, false)
|
||||
}
|
||||
}, 2000)
|
||||
|
||||
return () => {
|
||||
clearTimeout(timeout)
|
||||
// Restore original color if component unmounts
|
||||
if (window.app?.graph._nodes.includes(node)) {
|
||||
node.color = originalColor
|
||||
window.app.graph.setDirtyCanvas(true, false)
|
||||
}
|
||||
}
|
||||
}, [highlightedNode])
|
||||
|
||||
// Calculate statistics from nodes
|
||||
const { filteredNodes, categories, nodeCounts, totalNodes } = useMemo(() => {
|
||||
// Get filtered nodes based on selected category
|
||||
const filtered =
|
||||
selectedCategory === 'all'
|
||||
? nodes
|
||||
: nodes.filter((node) => node.category === selectedCategory)
|
||||
|
||||
// Get unique categories
|
||||
const uniqueCategories = [
|
||||
...new Set(nodes.map((node) => node.category))
|
||||
].sort()
|
||||
|
||||
// Count nodes by category
|
||||
const counts = nodes.reduce((acc: Record<string, number>, node) => {
|
||||
const category = node.category
|
||||
acc[category] = (acc[category] || 0) + 1
|
||||
return acc
|
||||
}, {})
|
||||
|
||||
return {
|
||||
filteredNodes: filtered,
|
||||
categories: uniqueCategories,
|
||||
nodeCounts: counts,
|
||||
totalNodes: nodes.length
|
||||
}
|
||||
}, [nodes, selectedCategory])
|
||||
|
||||
return (
|
||||
<div className="react-example-container">
|
||||
<h2>{t('app.title')}</h2>
|
||||
|
||||
<div className="stats-overview">
|
||||
<div className="stat-card">
|
||||
<div className="stat-value">{totalNodes}</div>
|
||||
<div className="stat-label">{t('app.nodeStats.totalNodes')}</div>
|
||||
</div>
|
||||
<div className="stat-card">
|
||||
<div className="stat-value">{categories.length}</div>
|
||||
<div className="stat-label">{t('app.nodeStats.uniqueNodeTypes')}</div>
|
||||
</div>
|
||||
<div className="stat-card">
|
||||
<div className="stat-value">{isQueueRunning ? 'Active' : 'Idle'}</div>
|
||||
<div className="stat-label">Queue Status</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="dashboard-section">
|
||||
<h3>Node Type Distribution</h3>
|
||||
{totalNodes > 0 ? (
|
||||
<NodeStatsChart nodeCounts={nodeCounts} totalNodes={totalNodes} />
|
||||
) : (
|
||||
<div className="empty-state">{t('app.noNodes')}</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="dashboard-section">
|
||||
<h3>{t('app.nodeList.title')}</h3>
|
||||
<CategoryFilter
|
||||
categories={categories}
|
||||
selectedCategory={selectedCategory}
|
||||
onSelectCategory={setSelectedCategory}
|
||||
/>
|
||||
|
||||
<div className="node-list">
|
||||
{filteredNodes.length > 0 ? (
|
||||
filteredNodes.map((node) => (
|
||||
<div
|
||||
key={node.id}
|
||||
className="node-item"
|
||||
onClick={() => setHighlightedNode(node.id)}
|
||||
>
|
||||
<div
|
||||
className="node-badge"
|
||||
style={{
|
||||
backgroundColor:
|
||||
CATEGORY_COLORS[node.category] || CATEGORY_COLORS._default
|
||||
}}
|
||||
></div>
|
||||
<div className="node-title">{node.title}</div>
|
||||
<div className="node-meta">
|
||||
<span>
|
||||
{t('app.nodeList.inputs')}: {node.inputs}
|
||||
</span>
|
||||
<span>
|
||||
{t('app.nodeList.outputs')}: {node.outputs}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div className="empty-state">
|
||||
{totalNodes === 0
|
||||
? t('app.noNodes')
|
||||
: 'No nodes match the selected filter'}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="dashboard-section" style={{ marginTop: '20px' }}>
|
||||
<h3>API Examples</h3>
|
||||
<div
|
||||
className="api-examples"
|
||||
style={{ display: 'flex', flexWrap: 'wrap', gap: '10px' }}
|
||||
>
|
||||
<h4>Dialog API</h4>
|
||||
<button
|
||||
className="dialog-btn"
|
||||
onClick={() => {
|
||||
// Dialog API Example - Prompt
|
||||
void window.app?.extensionManager.dialog
|
||||
.prompt({
|
||||
title: 'Dialog API Demo',
|
||||
message:
|
||||
'This is a prompt dialog example. Please enter something:',
|
||||
defaultValue: 'Dialog API is great!'
|
||||
})
|
||||
.then((result) => {
|
||||
if (result !== null) {
|
||||
alert(`You entered: ${result}`)
|
||||
}
|
||||
})
|
||||
}}
|
||||
style={{
|
||||
padding: '8px 12px',
|
||||
backgroundColor: '#2196F3',
|
||||
color: 'white',
|
||||
border: 'none',
|
||||
borderRadius: '4px',
|
||||
cursor: 'pointer',
|
||||
margin: '5px'
|
||||
}}
|
||||
>
|
||||
Show Prompt Dialog
|
||||
</button>
|
||||
|
||||
<button
|
||||
className="dialog-btn"
|
||||
onClick={() => {
|
||||
// Dialog API Example - Confirm
|
||||
void window.app?.extensionManager.dialog
|
||||
.confirm({
|
||||
title: 'Confirm Action',
|
||||
message: 'This is a confirmation dialog example.',
|
||||
type: 'default'
|
||||
})
|
||||
.then((result) => {
|
||||
alert(result ? 'You confirmed!' : 'You cancelled!')
|
||||
})
|
||||
}}
|
||||
style={{
|
||||
padding: '8px 12px',
|
||||
backgroundColor: '#FF9800',
|
||||
color: 'white',
|
||||
border: 'none',
|
||||
borderRadius: '4px',
|
||||
cursor: 'pointer',
|
||||
margin: '5px'
|
||||
}}
|
||||
>
|
||||
Show Confirm Dialog
|
||||
</button>
|
||||
|
||||
<h4>Toast API</h4>
|
||||
<button
|
||||
className="toast-btn"
|
||||
onClick={() => {
|
||||
// Toast API Example - Info
|
||||
window.app?.extensionManager.toast.add({
|
||||
severity: 'info',
|
||||
summary: 'Information',
|
||||
detail: 'This is an info toast message',
|
||||
life: 3000
|
||||
})
|
||||
}}
|
||||
style={{
|
||||
padding: '8px 12px',
|
||||
backgroundColor: '#2196F3',
|
||||
color: 'white',
|
||||
border: 'none',
|
||||
borderRadius: '4px',
|
||||
cursor: 'pointer',
|
||||
margin: '5px'
|
||||
}}
|
||||
>
|
||||
Show Info Toast
|
||||
</button>
|
||||
|
||||
<button
|
||||
className="toast-btn"
|
||||
onClick={() => {
|
||||
// Toast API Example - Success
|
||||
window.app?.extensionManager.toast.add({
|
||||
severity: 'success',
|
||||
summary: 'Success',
|
||||
detail: 'Operation completed successfully!',
|
||||
life: 3000
|
||||
})
|
||||
}}
|
||||
style={{
|
||||
padding: '8px 12px',
|
||||
backgroundColor: '#4CAF50',
|
||||
color: 'white',
|
||||
border: 'none',
|
||||
borderRadius: '4px',
|
||||
cursor: 'pointer',
|
||||
margin: '5px'
|
||||
}}
|
||||
>
|
||||
Show Success Toast
|
||||
</button>
|
||||
|
||||
<button
|
||||
className="toast-btn"
|
||||
onClick={() => {
|
||||
// Toast API Example - Warning
|
||||
window.app?.extensionManager.toast.add({
|
||||
severity: 'warn',
|
||||
summary: 'Warning',
|
||||
detail: 'This action may cause issues!',
|
||||
life: 5000
|
||||
})
|
||||
}}
|
||||
style={{
|
||||
padding: '8px 12px',
|
||||
backgroundColor: '#FF9800',
|
||||
color: 'white',
|
||||
border: 'none',
|
||||
borderRadius: '4px',
|
||||
cursor: 'pointer',
|
||||
margin: '5px'
|
||||
}}
|
||||
>
|
||||
Show Warning Toast
|
||||
</button>
|
||||
|
||||
<button
|
||||
className="toast-btn"
|
||||
onClick={() => {
|
||||
// Toast API Example - Error
|
||||
window.app?.extensionManager.toast.add({
|
||||
severity: 'error',
|
||||
summary: 'Error',
|
||||
detail: 'Something went wrong!',
|
||||
life: 5000
|
||||
})
|
||||
}}
|
||||
style={{
|
||||
padding: '8px 12px',
|
||||
backgroundColor: '#F44336',
|
||||
color: 'white',
|
||||
border: 'none',
|
||||
borderRadius: '4px',
|
||||
cursor: 'pointer',
|
||||
margin: '5px'
|
||||
}}
|
||||
>
|
||||
Show Error Toast
|
||||
</button>
|
||||
|
||||
<button
|
||||
className="toast-btn"
|
||||
onClick={() => {
|
||||
// Toast API Example - Alert alternative using regular toast
|
||||
window.app?.extensionManager.toast.add({
|
||||
severity: 'info',
|
||||
summary: 'Alert',
|
||||
detail: 'This is an alert message!',
|
||||
life: 3000
|
||||
})
|
||||
}}
|
||||
style={{
|
||||
padding: '8px 12px',
|
||||
backgroundColor: '#673AB7',
|
||||
color: 'white',
|
||||
border: 'none',
|
||||
borderRadius: '4px',
|
||||
cursor: 'pointer',
|
||||
margin: '5px'
|
||||
}}
|
||||
>
|
||||
Show Alert Toast
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="footer">
|
||||
<p>{t('app.footer.clickToHighlight')}</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default App
|
||||
@@ -0,0 +1,18 @@
|
||||
/** @jsxImportSource react */
|
||||
import '@testing-library/jest-dom'
|
||||
import { render } from '@testing-library/react'
|
||||
|
||||
// A simple component for testing
|
||||
function DummyComponent({ text }: { text: string }) {
|
||||
return <div data-testid="dummy-component">{text}</div>
|
||||
}
|
||||
|
||||
describe('Dummy Component', () => {
|
||||
it('renders with provided text', () => {
|
||||
const { getByTestId } = render(<DummyComponent text="Hello ComfyUI!" />)
|
||||
|
||||
const element = getByTestId('dummy-component')
|
||||
expect(element).toBeInTheDocument()
|
||||
expect(element).toHaveTextContent('Hello ComfyUI!')
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,33 @@
|
||||
/* Base styles for our extension */
|
||||
:root {
|
||||
--example-primary-color: #3498db;
|
||||
--example-secondary-color: #2c3e50;
|
||||
--example-text-color: #ecf0f1;
|
||||
--example-accent-color: #e74c3c;
|
||||
--example-bg-color: #34495e;
|
||||
--example-border-color: #7f8c8d;
|
||||
--example-muted-text-color: #95a5a6;
|
||||
}
|
||||
|
||||
/* Light mode overrides */
|
||||
:root.comfy-theme-light #comfyui-react-example-root {
|
||||
--example-primary-color: #2980b9;
|
||||
--example-secondary-color: #34495e;
|
||||
--example-text-color: #2c3e50;
|
||||
--example-accent-color: #c0392b;
|
||||
--example-bg-color: #ecf0f1;
|
||||
--example-border-color: #bdc3c7;
|
||||
--example-muted-text-color: #7f8c8d;
|
||||
}
|
||||
|
||||
/* Make sure our styles don't leak out to the rest of ComfyUI */
|
||||
#comfyui-react-example-root {
|
||||
height: 100%;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
box-sizing: border-box;
|
||||
color: var(--example-text-color);
|
||||
}
|
||||
|
||||
#comfyui-react-example-root * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
+243
@@ -0,0 +1,243 @@
|
||||
import { ComfyApp } from '@comfyorg/comfyui-frontend-types'
|
||||
import React, { Suspense } from 'react'
|
||||
import ReactDOM from 'react-dom/client'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
import './index.css'
|
||||
import './utils/i18n'
|
||||
|
||||
// Declare global ComfyUI objects
|
||||
declare global {
|
||||
interface Window {
|
||||
app?: ComfyApp
|
||||
}
|
||||
}
|
||||
|
||||
// Lazy load the App component for better performance
|
||||
const App = React.lazy(() => import('./App'))
|
||||
|
||||
// Function to wait for document and app to be ready
|
||||
function waitForInit(): Promise<void> {
|
||||
return new Promise((resolve) => {
|
||||
// Check if document is ready
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', checkApp)
|
||||
} else {
|
||||
checkApp()
|
||||
}
|
||||
|
||||
// Check if app is available
|
||||
function checkApp() {
|
||||
if (window.app) {
|
||||
resolve()
|
||||
} else {
|
||||
// Poll for app availability
|
||||
const interval = setInterval(() => {
|
||||
if (window.app) {
|
||||
console.log('App initialized')
|
||||
clearInterval(interval)
|
||||
resolve()
|
||||
}
|
||||
}, 50)
|
||||
|
||||
// Set timeout to avoid infinite polling
|
||||
setTimeout(() => {
|
||||
clearInterval(interval)
|
||||
console.error('Timeout waiting for app to initialize')
|
||||
resolve() // Continue anyway to avoid blocking
|
||||
}, 5000)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// Initialize the extension once everything is ready
|
||||
async function initializeExtension(): Promise<void> {
|
||||
try {
|
||||
// Wait for document and ComfyUI app
|
||||
await waitForInit()
|
||||
console.log('App:', window.app)
|
||||
|
||||
if (!window.app) {
|
||||
console.error('ComfyUI app not available')
|
||||
return
|
||||
}
|
||||
|
||||
// Create a function component with i18n for translation
|
||||
function SidebarWrapper() {
|
||||
// Using useTranslation hook to initialize i18n context
|
||||
useTranslation()
|
||||
return <App />
|
||||
}
|
||||
|
||||
// Register the sidebar tab using ComfyUI's extension API
|
||||
const sidebarTab = {
|
||||
id: 'comfyui-react-example',
|
||||
icon: 'pi pi-code', // Using PrimeVue icon
|
||||
title: 'React Example',
|
||||
tooltip: 'React Example Extension',
|
||||
type: 'custom' as const,
|
||||
render: (element: HTMLElement) => {
|
||||
console.log('Rendering React Example Extension')
|
||||
// Create a container for our React app
|
||||
const container = document.createElement('div')
|
||||
container.id = 'comfyui-react-example-root'
|
||||
container.style.height = '100%'
|
||||
element.appendChild(container)
|
||||
|
||||
// Mount the React app to the container
|
||||
ReactDOM.createRoot(container).render(
|
||||
<React.StrictMode>
|
||||
<Suspense fallback={<div>Loading...</div>}>
|
||||
<SidebarWrapper />
|
||||
</Suspense>
|
||||
</React.StrictMode>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
window.app.extensionManager.registerSidebarTab(sidebarTab)
|
||||
|
||||
// Register extension with about page badges
|
||||
window.app.registerExtension({
|
||||
name: 'ReactExtensionExample',
|
||||
// About Panel Badges API - Adds custom badges to the ComfyUI about page
|
||||
aboutPageBadges: [
|
||||
{
|
||||
label: 'Documentation',
|
||||
url: 'https://docs.comfy.org/custom-nodes/js/javascript_overview',
|
||||
icon: 'pi pi-file'
|
||||
},
|
||||
{
|
||||
label: 'GitHub',
|
||||
url: 'https://github.com/Comfy-Org/ComfyUI-React-Extension-Template',
|
||||
icon: 'pi pi-github'
|
||||
},
|
||||
{
|
||||
label: 'Support',
|
||||
url: 'https://discord.gg/comfy-org',
|
||||
icon: 'pi pi-discord'
|
||||
}
|
||||
],
|
||||
|
||||
// Bottom Panel Tabs API - Adds custom tabs to the bottom panel
|
||||
bottomPanelTabs: [
|
||||
{
|
||||
id: 'react-example-tab',
|
||||
title: 'React Example Tab',
|
||||
type: 'custom',
|
||||
render: (el) => {
|
||||
// Create a container for our React content
|
||||
const container = document.createElement('div')
|
||||
container.id = 'react-example-bottom-tab'
|
||||
container.style.padding = '10px'
|
||||
el.appendChild(container)
|
||||
|
||||
// Create a React component for the tab content
|
||||
function TabContent() {
|
||||
const [count, setCount] = React.useState(0)
|
||||
|
||||
return (
|
||||
<div style={{ padding: '10px' }}>
|
||||
<h3>React Example Bottom Panel</h3>
|
||||
<p>This is a demo of the Bottom Panel Tabs API.</p>
|
||||
<p>Count: {count}</p>
|
||||
<button
|
||||
onClick={() => setCount(count + 1)}
|
||||
style={{
|
||||
padding: '8px 12px',
|
||||
backgroundColor: '#4CAF50',
|
||||
color: 'white',
|
||||
border: 'none',
|
||||
borderRadius: '4px',
|
||||
cursor: 'pointer'
|
||||
}}
|
||||
>
|
||||
Increment
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// Mount the React component
|
||||
ReactDOM.createRoot(container).render(
|
||||
<React.StrictMode>
|
||||
<TabContent />
|
||||
</React.StrictMode>
|
||||
)
|
||||
}
|
||||
}
|
||||
],
|
||||
|
||||
// Commands and Keybindings API - Register custom commands with keyboard shortcuts
|
||||
commands: [
|
||||
{
|
||||
id: 'reactExample.showInfo',
|
||||
label: 'Show React Example Info',
|
||||
function: () => {
|
||||
alert(
|
||||
'React Example Extension - This command was triggered by the Commands API'
|
||||
)
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'reactExample.runWorkflow',
|
||||
label: 'Run Workflow from React Example',
|
||||
function: () => {
|
||||
void window.app?.queuePrompt(0) // Pass 0 as default prompt number
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'reactExample.clearWorkflow',
|
||||
label: 'Clear Workflow from React Example',
|
||||
function: () => {
|
||||
if (confirm('Clear the current workflow? This cannot be undone.')) {
|
||||
window.app?.graph.clear()
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
|
||||
// Associate keybindings with the commands
|
||||
keybindings: [
|
||||
{
|
||||
combo: { key: 'i', ctrl: true, alt: true },
|
||||
commandId: 'reactExample.showInfo'
|
||||
},
|
||||
{
|
||||
combo: { key: 'r', ctrl: true, alt: true },
|
||||
commandId: 'reactExample.runWorkflow'
|
||||
},
|
||||
{
|
||||
combo: { key: 'Delete', ctrl: true, alt: true },
|
||||
commandId: 'reactExample.clearWorkflow'
|
||||
}
|
||||
],
|
||||
|
||||
// Topbar Menu API - Add commands to the top menu bar
|
||||
menuCommands: [
|
||||
{
|
||||
// Add commands to the Extensions menu
|
||||
path: ['Extensions', 'React Example'],
|
||||
commands: [
|
||||
'reactExample.showInfo',
|
||||
'reactExample.runWorkflow',
|
||||
'reactExample.clearWorkflow'
|
||||
]
|
||||
},
|
||||
{
|
||||
// Create a submenu under Extensions > React Example
|
||||
path: ['Extensions', 'React Example', 'Advanced'],
|
||||
commands: ['reactExample.showInfo']
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
console.log('React Example Extension initialized successfully')
|
||||
} catch (error) {
|
||||
console.error('Failed to initialize React Example Extension:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// Start initialization
|
||||
void initializeExtension()
|
||||
@@ -0,0 +1,2 @@
|
||||
// Import jest-dom matchers
|
||||
import '@testing-library/jest-dom'
|
||||
@@ -0,0 +1,135 @@
|
||||
import i18n from 'i18next'
|
||||
import LanguageDetector from 'i18next-browser-languagedetector'
|
||||
import Backend from 'i18next-http-backend'
|
||||
import { initReactI18next } from 'react-i18next'
|
||||
|
||||
// Define fallback translations for debugging
|
||||
interface TranslationResource {
|
||||
[language: string]: {
|
||||
[namespace: string]: {
|
||||
app: {
|
||||
title: string
|
||||
description: string
|
||||
noNodes: string
|
||||
nodeList: {
|
||||
title: string
|
||||
id: string
|
||||
type: string
|
||||
category: string
|
||||
inputs: string
|
||||
outputs: string
|
||||
}
|
||||
nodeStats: {
|
||||
title: string
|
||||
totalNodes: string
|
||||
uniqueNodeTypes: string
|
||||
}
|
||||
footer: {
|
||||
clickToHighlight: string
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const fallbackResources: TranslationResource = {
|
||||
en: {
|
||||
main: {
|
||||
app: {
|
||||
title: 'React Example Extension (Fallback)',
|
||||
description: 'Shows statistics about nodes in the current workflow',
|
||||
noNodes: 'No nodes in the workflow',
|
||||
nodeList: {
|
||||
title: 'Node List',
|
||||
id: 'ID',
|
||||
type: 'Type',
|
||||
category: 'Category',
|
||||
inputs: 'Inputs',
|
||||
outputs: 'Outputs'
|
||||
},
|
||||
nodeStats: {
|
||||
title: 'Node Statistics',
|
||||
totalNodes: 'Total nodes',
|
||||
uniqueNodeTypes: 'Unique node types'
|
||||
},
|
||||
footer: {
|
||||
clickToHighlight:
|
||||
'Click on any node in the list to highlight it in the workflow'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize i18next
|
||||
void i18n
|
||||
// Load translations via http backend (must be first!)
|
||||
.use(Backend)
|
||||
// Detect user language
|
||||
.use(LanguageDetector)
|
||||
// Initialize react-i18next
|
||||
.use(initReactI18next)
|
||||
// Initialize i18next
|
||||
.init({
|
||||
// Always enable debug mode to see what's happening
|
||||
debug: true,
|
||||
|
||||
// Fallback language
|
||||
fallbackLng: 'en',
|
||||
|
||||
// Namespace for translations
|
||||
ns: ['main'],
|
||||
defaultNS: 'main',
|
||||
|
||||
// Do not load from bundled resources first
|
||||
initImmediate: true,
|
||||
|
||||
// Custom handling for missing keys
|
||||
saveMissing: true,
|
||||
missingKeyHandler: (lng, ns, key) => {
|
||||
console.log(`Missing translation: [${lng}] ${ns}:${key}`)
|
||||
},
|
||||
|
||||
// Language detection configuration
|
||||
detection: {
|
||||
// Order of detection methods
|
||||
order: ['navigator', 'htmlTag', 'path', 'subdomain'],
|
||||
// Don't cache detected language
|
||||
caches: []
|
||||
},
|
||||
|
||||
// Backend configuration
|
||||
backend: {
|
||||
// Path to load translations from
|
||||
loadPath: '/locales/{{lng}}/{{ns}}.json',
|
||||
// Add retry logic
|
||||
requestOptions: {
|
||||
retry: 3,
|
||||
timeout: 3000
|
||||
}
|
||||
},
|
||||
|
||||
// React specific options
|
||||
react: {
|
||||
useSuspense: true
|
||||
},
|
||||
|
||||
// Allow string formatting for dynamic values
|
||||
interpolation: {
|
||||
escapeValue: false // Not needed for React as it escapes by default
|
||||
}
|
||||
})
|
||||
|
||||
// Add fallback resources only if HTTP loading fails
|
||||
i18n.on('failedLoading', (lng, ns) => {
|
||||
console.log(
|
||||
`Failed loading translation file for ${lng} and ${ns}, using fallback`
|
||||
)
|
||||
|
||||
// Add the fallback resources for this language
|
||||
if (fallbackResources[lng] && fallbackResources[lng][ns]) {
|
||||
i18n.addResourceBundle(lng, ns, fallbackResources[lng][ns], true, true)
|
||||
}
|
||||
})
|
||||
|
||||
export default i18n
|
||||
Vendored
+9
@@ -0,0 +1,9 @@
|
||||
/// <reference types="vite/client" />
|
||||
|
||||
interface ImportMeta {
|
||||
env: {
|
||||
DEV: boolean
|
||||
PROD: boolean
|
||||
MODE: string
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
|
||||
/* Testing */
|
||||
"types": ["jest", "@testing-library/jest-dom"]
|
||||
},
|
||||
"include": ["src"],
|
||||
"references": [{ "path": "./tsconfig.node.json" }]
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"skipLibCheck": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "bundler",
|
||||
"allowSyntheticDefaultImports": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
import { defineConfig } from 'vite';
|
||||
import react from '@vitejs/plugin-react';
|
||||
import path from 'path';
|
||||
|
||||
// Plugin to correctly handle the ComfyUI scripts in development mode
|
||||
const rewriteComfyImports = ({ isDev }) => {
|
||||
return {
|
||||
name: "rewrite-comfy-imports",
|
||||
resolveId(source) {
|
||||
if (!isDev) {
|
||||
return;
|
||||
}
|
||||
if (source === "/scripts/app.js") {
|
||||
return "http://127.0.0.1:8188/scripts/app.js";
|
||||
}
|
||||
if (source === "/scripts/api.js") {
|
||||
return "http://127.0.0.1:8188/scripts/api.js";
|
||||
}
|
||||
return null;
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
// Plugin to copy locales to the output directory
|
||||
const copyLocales = () => {
|
||||
return {
|
||||
name: "copy-locales",
|
||||
writeBundle() {
|
||||
// This runs after bundle is written
|
||||
console.log("Bundle complete, copying locales...");
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
export default defineConfig(({ mode }) => ({
|
||||
plugins: [
|
||||
react(),
|
||||
rewriteComfyImports({ isDev: mode === "development" }),
|
||||
copyLocales()
|
||||
],
|
||||
publicDir: "public", // Explicitly set public directory
|
||||
build: {
|
||||
emptyOutDir: true,
|
||||
rollupOptions: {
|
||||
// Don't bundle ComfyUI scripts - they will be loaded from the ComfyUI server
|
||||
external: ['/scripts/app.js', '/scripts/api.js'],
|
||||
input: {
|
||||
main: path.resolve(__dirname, 'src/main.tsx'),
|
||||
},
|
||||
output: {
|
||||
// Output to the dist/example_ext directory
|
||||
dir: '../dist',
|
||||
entryFileNames: 'example_ext/[name].js',
|
||||
chunkFileNames: 'example_ext/[name]-[hash].js',
|
||||
assetFileNames: 'example_ext/[name][extname]',
|
||||
// Split React into a separate vendor chunk for better caching
|
||||
manualChunks: {
|
||||
'vendor': ['react', 'react-dom'],
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}));
|
||||
@@ -0,0 +1,54 @@
|
||||
import { defineConfig } from 'vite';
|
||||
import react from '@vitejs/plugin-react';
|
||||
import path from 'path';
|
||||
|
||||
interface RewriteComfyImportsOptions {
|
||||
isDev: boolean;
|
||||
}
|
||||
|
||||
// Plugin to correctly handle the ComfyUI scripts in development mode
|
||||
const rewriteComfyImports = ({ isDev }: RewriteComfyImportsOptions) => {
|
||||
return {
|
||||
name: "rewrite-comfy-imports",
|
||||
resolveId(source: string) {
|
||||
if (!isDev) {
|
||||
return;
|
||||
}
|
||||
if (source === "/scripts/app.js") {
|
||||
return "http://127.0.0.1:8188/scripts/app.js";
|
||||
}
|
||||
if (source === "/scripts/api.js") {
|
||||
return "http://127.0.0.1:8188/scripts/api.js";
|
||||
}
|
||||
return null;
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
export default defineConfig(({ mode }) => ({
|
||||
plugins: [
|
||||
react(),
|
||||
rewriteComfyImports({ isDev: mode === "development" })
|
||||
],
|
||||
build: {
|
||||
emptyOutDir: true,
|
||||
rollupOptions: {
|
||||
// Don't bundle ComfyUI scripts - they will be loaded from the ComfyUI server
|
||||
external: ['/scripts/app.js', '/scripts/api.js'],
|
||||
input: {
|
||||
main: path.resolve(__dirname, 'src/main.tsx'),
|
||||
},
|
||||
output: {
|
||||
// Output to the dist/example_ext directory
|
||||
dir: '../dist',
|
||||
entryFileNames: 'example_ext/[name].js',
|
||||
chunkFileNames: 'example_ext/[name]-[hash].js',
|
||||
assetFileNames: 'example_ext/[name][extname]',
|
||||
// Split React into a separate vendor chunk for better caching
|
||||
manualChunks: {
|
||||
'vendor': ['react', 'react-dom'],
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}))
|
||||
Reference in New Issue
Block a user