search

olizilla / hoodie-plugin-punk

A global hoodie.store with no rules
7 stars 2 forks source link

Punk not persisting to remote? #4

Closed vsivsi closed 10 years ago

vsivsi commented 10 years ago

Hi, totally new to Hoodie (but who isn't?) and I've been trying out a couple of plug-ins and am stuck on this one. Here's my setup: I'm trying to make a r(e)active + punk mashup of the hoodie_todos playground app, without any user/email stuff.

So I create the project as:

 hoodie new hoodie_punk_todos
 cd hoodie_punk_todos/
 hoodie install reactive
 hoodie install punk
 hoodie uninstall users
 hoodie uninstall email

Then I use this for my www/index.html (stripping out the User signing stuff, and substituting in Ractive template and Punk store logic) :

  <!DOCTYPE html>
  <html class="no-js">
    <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
      <title>hoodie_todos</title>
      <meta name="description" content="">
      <meta name="viewport" content="width=device-width">

      <link rel="stylesheet" href="assets/vendor/bootstrap/bootstrap.min.css">
      <link rel="stylesheet" href="assets/vendor/prism/prism.css">
      <link rel="stylesheet" href="assets/main.css">
    </head>
    <body>
      <div class="container">
        <div class="hero-unit">
          <h1>hoodie_todos</h1>
          <p>
            hoodie playground.
          </p>
        <div class="content">
          <ul id="todolist"></ul>

          <input type="text" id="todoinput"  placeholder="new todo ↵" />
        </div>

        <div class="code">
  <pre class="language-javascript"><code class="language-javascript">
  // initialize Hoodie
  var hoodie  = new Hoodie()

  var html = '<ul>{{#todos}}<li>{{title}}</li>{{/todos}}</ul>'

  hoodie.reactive($('#todolist'), html, function (punk) {
    var defer = hoodie.defer()

    punk.findAll('todo').done(function (todos) {
      todos.sort(function (a, b) {
        return a.createdAt > b.createdAt ? -1 : a.createdAt < b.createdAt ? 1 : 0
      })
      defer.resolve({todos: todos})
    })

    return defer.promise()
  }, {store: hoodie.punk})

  // handle creating a new task
  $('#todoinput').on('keypress', function(event) {
    if (event.keyCode == 13) { // ENTER
      hoodie.punk.add('todo', {title: event.target.value});
      event.target.value = '';
    }
  })

  hoodie.punk.add('todo', { title: 'wtf? punk', important: false });

  </code></pre>
        </div><!-- /.code -->

        <footer class="copy">
          <p>&hearts; hood.ie 2013</p>
        </footer>
      </div> <!-- /.container -->

      <script src="assets/vendor/jquery-1.9.1.js"></script>
      <script src="assets/vendor/bootstrap/bootstrap.js"></script>
      <script src="assets/vendor/prism/prism.js"></script>
      <!-- Load the dynamic version of hoodie.js that includes all the plugin code-->
      <script src="/_api/_files/hoodie.js"></script>
      <script src="assets/main.js"></script>
    </body>
  </html>

Then I run hoodie start and promising things happen, including seeing things like this in the console:

 Version: 0.3.2 (node v0.10.22, npm 1.3.15, platform: darwin)
 Initializing...
 [ 'couch_cfg',
   { port: '6009',
     prefix: '/Users/user/hoodie_punk_todos/data',
     couchdb_path: '/opt/local/bin/couchdb',
     default_sys_ini: '/opt/local/etc/couchdb/default.ini',
     respawn: false,
     session_timeout: '172800' } ]
 CouchDB started: http://127.0.0.1:6009
 Waiting for CouchDB [---*--] SUCCESS 
 WWW:   http://127.0.0.1:6007
 Admin: http://127.0.0.1:6008
 Starting Plugin: 'hoodie-plugin-punk'
 All plugins started.
 [hoodie] Hoodie app is running!
 [www] GET 200 /_api/ 7ms - 151b
 [www] GET 304 / 5ms
 [www] GET 304 /assets/vendor/bootstrap/bootstrap.min.css 2ms
 [www] GET 304 /assets/vendor/prism/prism.css 2ms
 [www] GET 304 /assets/main.css 1ms
 [www] GET 304 /assets/vendor/jquery-1.9.1.js 2ms
 [www] GET 304 /assets/vendor/bootstrap/bootstrap.js 2ms
 [www] GET 304 /assets/vendor/prism/prism.js 1ms
 [www] GET 200 /_api/_files/hoodie.js 9ms
 [www] GET 304 /assets/main.js 0ms
 [www] GET 304 /assets/pattern_130.gif 1ms
 [www] DELETE 200 /_api/_session 3ms - 12b
 [www] GET 200 /_api/ 6ms - 151b
 [www] GET 200 /_api/hoodie-plugin-punk/_changes?include_docs=true&since=0 6ms
 [www] GET 200 /_api/hoodie-plugin-punk/_changes?include_docs=true&since=4 3ms
 [www] GET 200 /_api/hoodie-plugin-punk/_changes?include_docs=true&since=4&heartbeat=10000&feed=longpoll 5950ms
 [www] GET 200 /_api/hoodie-plugin-punk/_changes?include_docs=true&since=4&heartbeat=10000&feed=longpoll 19561ms
 [www] GET 200 /_api/ 3ms - 151b
 [www] GET 200 / 7ms
 [www] GET 200 /assets/vendor/prism/prism.css 12ms
 [www] GET 200 /assets/main.css 12ms
 [www] GET 200 /assets/vendor/bootstrap/bootstrap.js 23ms
 [www] GET 200 /assets/vendor/bootstrap/bootstrap.min.css 29ms
 [www] GET 200 /assets/vendor/prism/prism.js 20ms
 [www] GET 200 /_api/_files/hoodie.js 18ms

And indeed, when I pull up the page, the todo sample seems to work, I can add items and they survive page reloads, etc. But, if I load the page in two separate browsers (say Safari and Firefox) they each work, but they don't communicate through the backend. And in fact, shutting the whole thing down and restarting everything causes all of the todos to be dropped. I know it's not the Ractive plugin, because that aspect of this works fine with the normal/default user store stuff baked in. It was only when I added Punk and stripped out all of the User/Auth stuff that persisting to the backend ceased. The above log leads me to believe that Punk is in fact working, kind of. I've tried browsing into futon i.e. /_api/_utils and I can see a hoodie-plugin-punk database, but there are no documents in it.

One hint: This line of code does nothing:

 hoodie.punk.add('todo', { title: 'wtf? punk', important: false });

I would expect this to cause a single wtf? todo to be added to the store on each page load, but it's not happening. However the #todoinput text box works fine. So it seems that the local store is being used, but everything isn't connecting to the back end.

I've run out of ideas to try and the docs on this are pretty thin, so I'm throwing this out there to see if anyone else has an ideas. Cheers.

vsivsi commented 10 years ago

Solved. Ugh. Am I the only one who finds the block of non-functional main.js "code" displayed in the Hoodie todo app to be a wee bit confusing (at 2:30am when just trying to get one last thing to work?)

So yeah, for this test, I had updated the "main.js" in the index.html, but not the actual main.js in the assets folder. Call it too much time messing about in JSFiddle, or maybe just well past bedtime. Either way, all was clear as soon as I sat at my keyboard this morning. Thanks for Punk, it seems to work just fine.

olizilla commented 10 years ago

Yep, late night coding plus code snippets that aren't actually run is a recipe for frustration.

Let us know how you get on with the reactive remake of the todos. /cc @alanshaw

On Tue, Dec 3, 2013 at 9:01 PM, Vaughn Iverson notifications@github.comwrote:

Solved. Ugh. Am I the only one who finds the block of non-functional main.js "code" displayed in the Hoodie todo app to be a wee bit confusing (at 2:30am when just trying to get one last thing to work?)

So yeah, for this test, I had updated the "main.js" in the index.html, but not the actual main.js in the assets folder. Call it too much time messing about in JSFiddle, or maybe just well past bedtime. Either, all was clear as soon as I sat at my keyboard this morning. Thanks for Punk, it seems to work just fine.

— Reply to this email directly or view it on GitHubhttps://github.com/olizilla/hoodie-plugin-punk/issues/4#issuecomment-29750860 .

Oli Evans http://oli.zilla.org.uk