BranchesTags

Repository files navigation

Reflet

Clojars Project

Reflet is a set of tools for building Re-frame + React based web apps with graph and non-graph data models.

At the core of Reflet is a single macro, with-ref, that generates references to any kind of thing, and also transparently manages the lifecycles of those things throughout your application. This leads to highly extensible components, and excellent APIs.

Besides with-ref, Reflet also provides:

  1. Performant multi-model DB with graph queries and mutations
  2. Simple but powerful hierarchical FSMs
  3. JS and DOM interop utilities
  4. Novel API-driven visual debugging of complex apps (don't sleep on this!)

And more!

Reflet aims to be a natural progression on top of Re-frame to support complex, data driven requirements. In that sense, it is both easy to learn, but powerful. You could say it's sort of like Re-frame++ (or Fulcro for Re-frame). Its main design goals are:

  1. A la carte feature set: it is not a "framework", so use as much or as little of it as you want
  2. Power up existing Re-frame applications: iterative, minimal approach to integration, so big re-writes can be avoided
  3. Graph and non-graph data models can be mixed freely with a single source of truth: a Clojure map
  4. Entity references connect things together: this encourages excellent, pluggable APIs
  5. Makes very few assumptions about your application boundaries
  6. Performance and stability: Reflet has already been deployed in complex, data driven production applications for 4+ years (e.g. in Bioinformatics, Business analytics... )

Who Is This For?

  1. Anyone who needs a powerful graph data model for Re-frame
  2. You already have an existing non-graph Re-frame application, and need to take it to the next level
  3. You are learning Re-frame, and want to get started right away with scalable data models and well-built component APIs

Installation

At minimum include the following in your deps.edn:

{:deps {io.zalky/reflet {:mvn/version"0.2.0"}}}

Or project.clj:

[io.zalky/reflet "0.2.0"]

Additionally, React is considered a peer dependency, so you will have to ensure that it is available. The same approach you would use to provide React for Reagent or Re-frame will also work for Reflet.

See the additional notes on how to configure the debugger for development.

Resources

Reflet builds on top of the concepts and design patterns of Re-frame, and these resources assume a working knowledge of Re-frame basics. If you are not familiar with Re-frame, check out that documentation first, it is very good. Otherwise:

  1. Rationale and Overview
  2. Quick Start
  3. Configuration
  4. Features
  5. Example Client
  6. General Development Tips

Getting Help

You can either submit an issue here on Github, or alternatively tag me (@zalky) with your question in the #re-frame channel on the Clojurians slack.

Contribution Acknowledgements

Special thanks to Inge Solvoll.

License

Reflet is distributed under the terms of the Apache License 2.0.

About

Tools for building Re-frame + React based web apps with graph and non-graph data models

Resources

Readme
License
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
BranchesTags
Repository files navigation
Reflet
Clojars Project
Reflet is a set of tools for building
Re-frame + React based web apps
with graph and non-graph data models.
At the core of Reflet is a single macro, with-ref, that generates
references to any kind of thing, and also transparently manages the
lifecycles of those things throughout your application. This leads to
highly extensible components, and excellent APIs.
Besides with-ref, Reflet also provides:
  1. Performant multi-model DB with graph queries and mutations
  2. Simple but powerful hierarchical FSMs
  3. JS and DOM interop utilities
  4. Novel API-driven visual debugging of complex apps (don't sleep on
this!)
And more!
Reflet aims to be a natural progression on top of Re-frame to support
complex, data driven requirements. In that sense, it is both easy to
learn, but powerful. You could say it's sort of like Re-frame++ (or
Fulcro for Re-frame). Its main design goals are:
  1. A la carte feature set: it is not a "framework", so use as much or
as little of it as you want
  2. Power up existing Re-frame applications: iterative, minimal
approach to integration, so big re-writes can be avoided
  3. Graph and non-graph data models can be mixed freely with a single
source of truth: a Clojure map
  4. Entity references connect things together: this encourages
excellent, pluggable APIs
  5. Makes very few assumptions about your application boundaries
  6. Performance and stability: Reflet has already been deployed in
complex, data driven production applications for 4+ years
(e.g. in Bioinformatics, Business analytics... )
Who Is This For?
  1. Anyone who needs a powerful graph data model for Re-frame
  2. You already have an existing non-graph Re-frame application, and
need to take it to the next level
  3. You are learning Re-frame, and want to get started right away with
scalable data models and well-built component APIs
Installation
At minimum include the following in your deps.edn:
{:deps {io.zalky/reflet {:mvn/version"0.2.0"}}}
Or project.clj:
[io.zalky/reflet "0.2.0"]
Additionally, React is considered a peer dependency, so you will have
to ensure that it is
available. The
same approach you would use to provide React for
Reagent or
Re-frame will also work for
Reflet.
See the additional
notes on
how to configure the debugger for development.
Resources
Reflet builds on top of the concepts and design patterns of Re-frame,
and these resources assume a working knowledge of Re-frame basics. If
you are not familiar with Re-frame, check out that
documentation first, it is
very good. Otherwise:
  1. Rationale and Overview
  2. Quick Start
  3. Configuration
  4. Features

  5. Example Client
  6. General Development Tips
Getting Help
You can either submit an issue here on Github, or alternatively tag me
(@zalky) with your question in the #re-frame channel on the
Clojurians slack.
Contribution Acknowledgements
Special thanks to Inge Solvoll.
License
Reflet is distributed under the terms of the Apache License 2.0.
About
Tools for building Re-frame + React based web apps with graph and non-graph data models
Resources
Readme
License
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
Reflet
Clojars Project
Reflet is a set of tools for building
Re-frame + React based web apps
with graph and non-graph data models.
At the core of Reflet is a single macro, with-ref, that generates
references to any kind of thing, and also transparently manages the
lifecycles of those things throughout your application. This leads to
highly extensible components, and excellent APIs.
Besides with-ref, Reflet also provides:
  1. Performant multi-model DB with graph queries and mutations
  2. Simple but powerful hierarchical FSMs
  3. JS and DOM interop utilities
  4. Novel API-driven visual debugging of complex apps (don't sleep on
this!)
And more!
Reflet aims to be a natural progression on top of Re-frame to support
complex, data driven requirements. In that sense, it is both easy to
learn, but powerful. You could say it's sort of like Re-frame++ (or
Fulcro for Re-frame). Its main design goals are:
  1. A la carte feature set: it is not a "framework", so use as much or
as little of it as you want
  2. Power up existing Re-frame applications: iterative, minimal
approach to integration, so big re-writes can be avoided
  3. Graph and non-graph data models can be mixed freely with a single
source of truth: a Clojure map
  4. Entity references connect things together: this encourages
excellent, pluggable APIs
  5. Makes very few assumptions about your application boundaries
  6. Performance and stability: Reflet has already been deployed in
complex, data driven production applications for 4+ years
(e.g. in Bioinformatics, Business analytics... )
Who Is This For?
  1. Anyone who needs a powerful graph data model for Re-frame
  2. You already have an existing non-graph Re-frame application, and
need to take it to the next level
  3. You are learning Re-frame, and want to get started right away with
scalable data models and well-built component APIs
Installation
At minimum include the following in your deps.edn:
{:deps {io.zalky/reflet {:mvn/version"0.2.0"}}}
Or project.clj:
[io.zalky/reflet "0.2.0"]
Additionally, React is considered a peer dependency, so you will have
to ensure that it is
available. The
same approach you would use to provide React for
Reagent or
Re-frame will also work for
Reflet.
See the additional
notes on
how to configure the debugger for development.
Resources
Reflet builds on top of the concepts and design patterns of Re-frame,
and these resources assume a working knowledge of Re-frame basics. If
you are not familiar with Re-frame, check out that
documentation first, it is
very good. Otherwise:
  1. Rationale and Overview
  2. Quick Start
  3. Configuration
  4. Features

  5. Example Client
  6. General Development Tips
Getting Help
You can either submit an issue here on Github, or alternatively tag me
(@zalky) with your question in the #re-frame channel on the
Clojurians slack.
Contribution Acknowledgements
Special thanks to Inge Solvoll.
License
Reflet is distributed under the terms of the Apache License 2.0.
About
Tools for building Re-frame + React based web apps with graph and non-graph data models
Resources
Readme
License
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
Reflet
Clojars Project
Reflet is a set of tools for building
Re-frame + React based web apps
with graph and non-graph data models.
At the core of Reflet is a single macro, with-ref, that generates
references to any kind of thing, and also transparently manages the
lifecycles of those things throughout your application. This leads to
highly extensible components, and excellent APIs.
Besides with-ref, Reflet also provides:
  1. Performant multi-model DB with graph queries and mutations
  2. Simple but powerful hierarchical FSMs
  3. JS and DOM interop utilities
  4. Novel API-driven visual debugging of complex apps (don't sleep on
this!)
And more!
Reflet aims to be a natural progression on top of Re-frame to support
complex, data driven requirements. In that sense, it is both easy to
learn, but powerful. You could say it's sort of like Re-frame++ (or
Fulcro for Re-frame). Its main design goals are:
  1. A la carte feature set: it is not a "framework", so use as much or
as little of it as you want
  2. Power up existing Re-frame applications: iterative, minimal
approach to integration, so big re-writes can be avoided
  3. Graph and non-graph data models can be mixed freely with a single
source of truth: a Clojure map
  4. Entity references connect things together: this encourages
excellent, pluggable APIs
  5. Makes very few assumptions about your application boundaries
  6. Performance and stability: Reflet has already been deployed in
complex, data driven production applications for 4+ years
(e.g. in Bioinformatics, Business analytics... )
Who Is This For?
  1. Anyone who needs a powerful graph data model for Re-frame
  2. You already have an existing non-graph Re-frame application, and
need to take it to the next level
  3. You are learning Re-frame, and want to get started right away with
scalable data models and well-built component APIs
Installation
At minimum include the following in your deps.edn:
{:deps {io.zalky/reflet {:mvn/version"0.2.0"}}}
Or project.clj:
[io.zalky/reflet "0.2.0"]
Additionally, React is considered a peer dependency, so you will have
to ensure that it is
available. The
same approach you would use to provide React for
Reagent or
Re-frame will also work for
Reflet.
See the additional
notes on
how to configure the debugger for development.
Resources
Reflet builds on top of the concepts and design patterns of Re-frame,
and these resources assume a working knowledge of Re-frame basics. If
you are not familiar with Re-frame, check out that
documentation first, it is
very good. Otherwise:
  1. Rationale and Overview
  2. Quick Start
  3. Configuration
  4. Features

  5. Example Client
  6. General Development Tips
Getting Help
You can either submit an issue here on Github, or alternatively tag me
(@zalky) with your question in the #re-frame channel on the
Clojurians slack.
Contribution Acknowledgements
Special thanks to Inge Solvoll.
License
Reflet is distributed under the terms of the Apache License 2.0.
About
Tools for building Re-frame + React based web apps with graph and non-graph data models
Resources
Readme
License
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
BranchesTags
Repository files navigation
Reflet
Clojars Project
Reflet is a set of tools for building
Re-frame + React based web apps
with graph and non-graph data models.
At the core of Reflet is a single macro, with-ref, that generates
references to any kind of thing, and also transparently manages the
lifecycles of those things throughout your application. This leads to
highly extensible components, and excellent APIs.
Besides with-ref, Reflet also provides:
  1. Performant multi-model DB with graph queries and mutations
  2. Simple but powerful hierarchical FSMs
  3. JS and DOM interop utilities
  4. Novel API-driven visual debugging of complex apps (don't sleep on
this!)
And more!
Reflet aims to be a natural progression on top of Re-frame to support
complex, data driven requirements. In that sense, it is both easy to
learn, but powerful. You could say it's sort of like Re-frame++ (or
Fulcro for Re-frame). Its main design goals are:
  1. A la carte feature set: it is not a "framework", so use as much or
as little of it as you want
  2. Power up existing Re-frame applications: iterative, minimal
approach to integration, so big re-writes can be avoided
  3. Graph and non-graph data models can be mixed freely with a single
source of truth: a Clojure map
  4. Entity references connect things together: this encourages
excellent, pluggable APIs
  5. Makes very few assumptions about your application boundaries
  6. Performance and stability: Reflet has already been deployed in
complex, data driven production applications for 4+ years
(e.g. in Bioinformatics, Business analytics... )
Who Is This For?
  1. Anyone who needs a powerful graph data model for Re-frame
  2. You already have an existing non-graph Re-frame application, and
need to take it to the next level
  3. You are learning Re-frame, and want to get started right away with
scalable data models and well-built component APIs
Installation
At minimum include the following in your deps.edn:
{:deps {io.zalky/reflet {:mvn/version"0.2.0"}}}
Or project.clj:
[io.zalky/reflet "0.2.0"]
Additionally, React is considered a peer dependency, so you will have
to ensure that it is
available. The
same approach you would use to provide React for
Reagent or
Re-frame will also work for
Reflet.
See the additional
notes on
how to configure the debugger for development.
Resources
Reflet builds on top of the concepts and design patterns of Re-frame,
and these resources assume a working knowledge of Re-frame basics. If
you are not familiar with Re-frame, check out that
documentation first, it is
very good. Otherwise:
  1. Rationale and Overview
  2. Quick Start
  3. Configuration
  4. Features

  5. Example Client
  6. General Development Tips
Getting Help
You can either submit an issue here on Github, or alternatively tag me
(@zalky) with your question in the #re-frame channel on the
Clojurians slack.
Contribution Acknowledgements
Special thanks to Inge Solvoll.
License
Reflet is distributed under the terms of the Apache License 2.0.
About
Tools for building Re-frame + React based web apps with graph and non-graph data models
Resources
Readme
License
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
Reflet
Clojars Project
Reflet is a set of tools for building
Re-frame + React based web apps
with graph and non-graph data models.
At the core of Reflet is a single macro, with-ref, that generates
references to any kind of thing, and also transparently manages the
lifecycles of those things throughout your application. This leads to
highly extensible components, and excellent APIs.
Besides with-ref, Reflet also provides:
  1. Performant multi-model DB with graph queries and mutations
  2. Simple but powerful hierarchical FSMs
  3. JS and DOM interop utilities
  4. Novel API-driven visual debugging of complex apps (don't sleep on
this!)
And more!
Reflet aims to be a natural progression on top of Re-frame to support
complex, data driven requirements. In that sense, it is both easy to
learn, but powerful. You could say it's sort of like Re-frame++ (or
Fulcro for Re-frame). Its main design goals are:
  1. A la carte feature set: it is not a "framework", so use as much or
as little of it as you want
  2. Power up existing Re-frame applications: iterative, minimal
approach to integration, so big re-writes can be avoided
  3. Graph and non-graph data models can be mixed freely with a single
source of truth: a Clojure map
  4. Entity references connect things together: this encourages
excellent, pluggable APIs
  5. Makes very few assumptions about your application boundaries
  6. Performance and stability: Reflet has already been deployed in
complex, data driven production applications for 4+ years
(e.g. in Bioinformatics, Business analytics... )
Who Is This For?
  1. Anyone who needs a powerful graph data model for Re-frame
  2. You already have an existing non-graph Re-frame application, and
need to take it to the next level
  3. You are learning Re-frame, and want to get started right away with
scalable data models and well-built component APIs
Installation
At minimum include the following in your deps.edn:
{:deps {io.zalky/reflet {:mvn/version"0.2.0"}}}
Or project.clj:
[io.zalky/reflet "0.2.0"]
Additionally, React is considered a peer dependency, so you will have
to ensure that it is
available. The
same approach you would use to provide React for
Reagent or
Re-frame will also work for
Reflet.
See the additional
notes on
how to configure the debugger for development.
Resources
Reflet builds on top of the concepts and design patterns of Re-frame,
and these resources assume a working knowledge of Re-frame basics. If
you are not familiar with Re-frame, check out that
documentation first, it is
very good. Otherwise:
  1. Rationale and Overview
  2. Quick Start
  3. Configuration
  4. Features

  5. Example Client
  6. General Development Tips
Getting Help
You can either submit an issue here on Github, or alternatively tag me
(@zalky) with your question in the #re-frame channel on the
Clojurians slack.
Contribution Acknowledgements
Special thanks to Inge Solvoll.
License
Reflet is distributed under the terms of the Apache License 2.0.
About
Tools for building Re-frame + React based web apps with graph and non-graph data models
Resources
Readme
License
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
Reflet
Clojars Project
Reflet is a set of tools for building
Re-frame + React based web apps
with graph and non-graph data models.
At the core of Reflet is a single macro, with-ref, that generates
references to any kind of thing, and also transparently manages the
lifecycles of those things throughout your application. This leads to
highly extensible components, and excellent APIs.
Besides with-ref, Reflet also provides:
  1. Performant multi-model DB with graph queries and mutations
  2. Simple but powerful hierarchical FSMs
  3. JS and DOM interop utilities
  4. Novel API-driven visual debugging of complex apps (don't sleep on
this!)
And more!
Reflet aims to be a natural progression on top of Re-frame to support
complex, data driven requirements. In that sense, it is both easy to
learn, but powerful. You could say it's sort of like Re-frame++ (or
Fulcro for Re-frame). Its main design goals are:
  1. A la carte feature set: it is not a "framework", so use as much or
as little of it as you want
  2. Power up existing Re-frame applications: iterative, minimal
approach to integration, so big re-writes can be avoided
  3. Graph and non-graph data models can be mixed freely with a single
source of truth: a Clojure map
  4. Entity references connect things together: this encourages
excellent, pluggable APIs
  5. Makes very few assumptions about your application boundaries
  6. Performance and stability: Reflet has already been deployed in
complex, data driven production applications for 4+ years
(e.g. in Bioinformatics, Business analytics... )
Who Is This For?
  1. Anyone who needs a powerful graph data model for Re-frame
  2. You already have an existing non-graph Re-frame application, and
need to take it to the next level
  3. You are learning Re-frame, and want to get started right away with
scalable data models and well-built component APIs
Installation
At minimum include the following in your deps.edn:
{:deps {io.zalky/reflet {:mvn/version"0.2.0"}}}
Or project.clj:
[io.zalky/reflet "0.2.0"]
Additionally, React is considered a peer dependency, so you will have
to ensure that it is
available. The
same approach you would use to provide React for
Reagent or
Re-frame will also work for
Reflet.
See the additional
notes on
how to configure the debugger for development.
Resources
Reflet builds on top of the concepts and design patterns of Re-frame,
and these resources assume a working knowledge of Re-frame basics. If
you are not familiar with Re-frame, check out that
documentation first, it is
very good. Otherwise:
  1. Rationale and Overview
  2. Quick Start
  3. Configuration
  4. Features

  5. Example Client
  6. General Development Tips
Getting Help
You can either submit an issue here on Github, or alternatively tag me
(@zalky) with your question in the #re-frame channel on the
Clojurians slack.
Contribution Acknowledgements
Special thanks to Inge Solvoll.
License
Reflet is distributed under the terms of the Apache License 2.0.
About
Tools for building Re-frame + React based web apps with graph and non-graph data models
Resources
Readme
License
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
BranchesTags
Repository files navigation
Reflet
Clojars Project
Reflet is a set of tools for building
Re-frame + React based web apps
with graph and non-graph data models.
At the core of Reflet is a single macro, with-ref, that generates
references to any kind of thing, and also transparently manages the
lifecycles of those things throughout your application. This leads to
highly extensible components, and excellent APIs.
Besides with-ref, Reflet also provides:
  1. Performant multi-model DB with graph queries and mutations
  2. Simple but powerful hierarchical FSMs
  3. JS and DOM interop utilities
  4. Novel API-driven visual debugging of complex apps (don't sleep on
this!)
And more!
Reflet aims to be a natural progression on top of Re-frame to support
complex, data driven requirements. In that sense, it is both easy to
learn, but powerful. You could say it's sort of like Re-frame++ (or
Fulcro for Re-frame). Its main design goals are:
  1. A la carte feature set: it is not a "framework", so use as much or
as little of it as you want
  2. Power up existing Re-frame applications: iterative, minimal
approach to integration, so big re-writes can be avoided
  3. Graph and non-graph data models can be mixed freely with a single
source of truth: a Clojure map
  4. Entity references connect things together: this encourages
excellent, pluggable APIs
  5. Makes very few assumptions about your application boundaries
  6. Performance and stability: Reflet has already been deployed in
complex, data driven production applications for 4+ years
(e.g. in Bioinformatics, Business analytics... )
Who Is This For?
  1. Anyone who needs a powerful graph data model for Re-frame
  2. You already have an existing non-graph Re-frame application, and
need to take it to the next level
  3. You are learning Re-frame, and want to get started right away with
scalable data models and well-built component APIs
Installation
At minimum include the following in your deps.edn:
{:deps {io.zalky/reflet {:mvn/version"0.2.0"}}}
Or project.clj:
[io.zalky/reflet "0.2.0"]
Additionally, React is considered a peer dependency, so you will have
to ensure that it is
available. The
same approach you would use to provide React for
Reagent or
Re-frame will also work for
Reflet.
See the additional
notes on
how to configure the debugger for development.
Resources
Reflet builds on top of the concepts and design patterns of Re-frame,
and these resources assume a working knowledge of Re-frame basics. If
you are not familiar with Re-frame, check out that
documentation first, it is
very good. Otherwise:
  1. Rationale and Overview
  2. Quick Start
  3. Configuration
  4. Features

  5. Example Client
  6. General Development Tips
Getting Help
You can either submit an issue here on Github, or alternatively tag me
(@zalky) with your question in the #re-frame channel on the
Clojurians slack.
Contribution Acknowledgements
Special thanks to Inge Solvoll.
License
Reflet is distributed under the terms of the Apache License 2.0.
About
Tools for building Re-frame + React based web apps with graph and non-graph data models
Resources
Readme
License
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages