Git Product home page Git Product logo

flyer.js's Issues

Reduce bundle size

Hey! I just stumbled over flyer.js because a documentation service I’m working on picked up the latest release: https://cljdoc.xyz/d/flyer/flyer/1.1.1

It seems like a cool project and since you’re targeting JS as well there’s probably some interesting optimizations to reduce the bundle size. I previously tried some similar minification — waaay less code admittedly — but I learned a few things that might be interesting for you as well:

  • str brings in a lot of stuff. In the linked example using str instead of goog/buildString adds 88K to the :advanced build. (Note that clj->js uses str under the hood so YMMV.)
  • If I remember correctly case is significantly leaner than cond — obviously not the same thing though so can't always replace cond.

I hope this is useful to you or at the very least interesting! 🙂 Cheers!

What kind of things people would like to see in a demo?

This is an open question,

I'm wondering if anyone would like specific use-cases for this library? I'm going to be developing a demo, outlining some of the things that could be done.

It should lead to some more squashed bugs!

Error when opening new tab via link onto a page with flyer.js

Steps to Reproduce

  1. Create 2 html Pages:

page_with_flyer.html

<script src="flyer.min.js"></script>

page_with_link.html

<a href="page_with_flyer.html" target="_blank">
  1. Open page_with_link.html and click on the link

->
On the newly opened tab, the Browser throws an Exception (tested with firefox and chrome):
Error: Permission denied to access property "flyer_WindowReferences"

This now prevents other javascript to be executed (in a minified file of all javascript on the page)

I tried adding try/catches into the storage.cljs file, which makes it not BREAK the whole javascript, but flyer.js does not work afterwards, when opening via a link.

This is what i tried:

(defn init-window-refs 
  "Initializes our window references"
  []
  (try
      (when (nil? (get-window-refs))
          (aset storage window-list-key (set nil)))
      (catch :default e
            (console.log e)
            nil)))

(defn get-window-refs 
  "Returns the window references, or an empty set"
  []
  (try
    (or
       (aget storage window-list-key)
       nil)
    (catch :default e
      (console.log e)
      nil)))


(defn insert-window-ref! [window]
  (init-window-refs)
  (try
      (aset storage window-list-key
              (conj (get-window-refs) window))
      (catch :default e
            (console.log e)
            nil)))

(defn remove-window-ref! [window]
  (try
        (aset storage window-list-key
                (disj (get-window-refs) window))
        (catch :default e
              (console.log e)
              nil

getting Uncaught DOMException

Hi,

I am getting these errors:

Uncaught DOMException (Chrome), Permission denied to access property "flyer_WindowReferences" (Firefox), Blocked a frame with origin... (Safari)

Markup hosted on Domain A:

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="description" content="">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
        <title></title>

        <script>
            window.onload = function () {
                flyer.subscribe({
                    channel: "test",
                    topic: "some.topic",
                    callback: function () {
                        console.log("event received!!!");
                    }
                });
            };
        </script>

        <script src="flyer.js"></script>

    </head>
    <body>
        <iframe src="http://some.other.host.com:80/flyer_inside.html"></iframe>
    </body>
</html>

Markup hosted on Domain B (http://some.other.host.com:80/flyer_inside.html):

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="description" content="">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
        <title></title>

        <script>
            var clickHandler = function() {
                flyer.broadcast({
                    channel: "test",
                    topic: "some.topic",
                    data: {}
                });
                console.log("flyer event broadcast!");
            };
        </script>
        <script src="flyer.js"></script>

    </head>
    <body>
        <button onclick="clickHandler()">click here to broadcast flyer event</button>
    </body>
</html>

Error seems to come from line 28699 in flyer.js, just setting or__3638__auto__ to undefined seems to hotfix the problem.

BR, Matthias

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.