Skip to content

New feature ideas #308

@719media

Description

@719media

Hey,
Excited for a new version of this library with some possible improvements. Just wanted to make a few recommendations:

  1. A "non-mixin" way of doing $keepSharedElementAlive. For example:
import { ref, onMounted, onActivated } from 'vue'

// by convention, composable function names start with "use"
export function useSharedElementKeepAlive() {
  // state encapsulated and managed by the composable
  const sharedElementTriggers = ref([]);
  const sharedElementFirstRender = ref(true);

  onMounted(() => {
    sharedElementTriggers.value.forEach((trigger) => {
      return trigger();
    });
  });

  onActivated(() => {
    if (sharedElementFirstRender.value) {
      return (sharedElementFirstRender.value = false);
    }
    sharedElementTriggers.value.forEach((trigger) => {
      return trigger();
    });
  });

  function keepSharedElementAlive(trigger) {
    sharedElementTriggers.value.push(trigger);
  }

  // expose managed state as return value
  return {
    keepSharedElementAlive,
  };
}

Could then be used in setup() more nicely. Keep in mind there is a potential bug with this implementation (that also exists in the current mixin as well): vuejs/core#7276

  1. A way to use this library without vue-router

  2. A way to enable/disable by parameter on the directive (e.g. v-shared-element="{disabled: true}")

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions